当前位置：首页 > news >正文

web前端之实现霓虹灯背景魔术卡、旋转的背景动画、模糊效果、边框、变量、filter

news 来源：原创 2024/9/21 2:47:34

前言

代码段定义一个名为Magic Card的卡片，并通过一系列CSS属性和动画效果来美化和增强该卡片的视觉效果。

效果图

html

<div class="card">Magic Card
</div>

style

代码

@property --rotate {syntax: "<angle>";initial-value: 132deg;inherits: false;
}:root {--card-height: 65vh;--card-width: calc(var(--card-height) / 1.5);
}body {width: 100vw;height: 100vh;display: flex;align-items: center;flex-direction: column;margin: 0;padding-top: 2rem;padding-bottom: 2rem;box-sizing: border-box;background: #212534;.card {position: relative;width: var(--card-width);height: var(--card-height);display: flex;justify-content: center;align-items: center;padding: 2px;border-radius: 4px;text-align: center;font-size: 1.5em;font-family: cursive;background: #191c29;color: rgb(88, 199, 250);cursor: pointer;}.card:hover {color: rgb(88, 199, 250);transition: color 1s;}.card:hover:before,.card:hover:after {animation: none;opacity: 0;}.card::before,.card::after {content: "";position: absolute;z-index: -1;background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);animation: spin 2.5s linear infinite;}.card::before {width: 104%;height: 102%;top: -1%;left: -2%;border-radius: 4px;}.card::after {width: 100%;height: 100%;top: calc(var(--card-height) / 6);right: 0;left: 0;opacity: 1;margin: 0 auto;transform: scale(0.8);transition: opacity .5s;filter: blur(calc(var(--card-height) / 6));}
}@keyframes spin {0% {--rotate: 0deg;}100% {--rotate: 360deg;}
}

解析

自定义属性(@property --rotate)
1、@property用于定义自定义CSS属性(也称为CSS变量)的语法、初始值和继承性。
2、--rotate是自定义属性的名称。
3、syntax: "<angle>";定义–rotate属性的语法为一个角度值。
4、initial-value: 132deg;设置–rotate属性的初始值为132deg。
5、inherits: false;表示该属性不继承父元素的值。

定义根元素的全局CSS变量
1、:root选择器表示文档的根元素(即html元素)，通常用于定义全局的CSS变量。
2、--card-height: 65vh;定义卡片的高度为视口高度的65%。
3、--card-width: calc(var(--card-height) / 1.5);定义卡片的宽度为其高度的2/3，即通过calc函数动态计算得出。

body元素样式
1、width: 100vw;和height: 100vh;设置body的宽度和高度分别为视口的100%。
2、display: flex;、justify-content: center;和align-items: center;使body元素成为弹性盒布局，并将子元素水平垂直居中。
3、margin: 0;清除外边距，padding-top: 2rem;和padding-bottom: 2rem;设置上下内边距。
4、box-sizing: border-box;确保padding和border不会影响元素的宽度和高度计算。
5、background: #212534;将背景色设为深蓝色。

.card样式
01、position: relative;允许卡片内部的伪元素使用绝对定位。
02、width: var(--card-width); 和 height: var(--card-height);使用前面定义的CSS变量来设置卡片的宽度和高度。
03、display: flex;、justify-content: center;和align-items: center;使卡片内容居中。
04、padding: 2px;设置卡片的内边距。
05、border-radius: 4px;使卡片的边角有一个4px的圆角。
06、text-align: center;让文本在卡片内居中对齐。
07、font-size: 1.5em;设置文本大小为1.5倍的默认字体大小。
08、font-family: cursive;设置字体为手写体风格。
09、background: #191c29;将卡片背景色设置为深色。
10、color: rgb(88, 199, 250);设置文字颜色为浅蓝色。
11、cursor: pointer;将鼠标悬停在卡片上时显示为手形图标。

悬停时.card的样式
1、color: rgb(88, 199, 250);在悬停时，将文字颜色设置为浅蓝色。
2、transition: color 1s;在1秒内平滑地过渡到新的文字颜色。

伪元素的动画
1、animation: none;在悬停时，禁用伪元素的动画。
2、opacity: 0;将伪元素的透明度设为0，使它们不可见。

卡片的伪元素样式
1、content: "";定义伪元素的内容为空。
2、position: absolute;使用绝对定位。
3、z-index: -1;将伪元素置于.card之下。
4、background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);设定伪元素的背景图为一个线性渐变，颜色由浅蓝到深蓝再到紫色，且渐变角度由–rotate变量控制。
5、animation: spin 2.5s linear infinite;让伪元素在2.5秒内不断旋转，且无限循环。

.card::before样式
1、width: 104%;和height: 102%;使伪元素比卡片略大。
2、top: -1%;和left: -2%;将伪元素稍微向上和向左偏移。
3、border-radius: 4px;使伪元素也具有圆角，与.card边角保持一致。

.card::after样式
1、width: 100%;和height: 100%;设置伪元素的大小与卡片相同。
2、top: calc(var(--card-height) / 6);将伪元素向下偏移卡片高度的六分之一。
3、right: 0;和left: 0;让伪元素水平居中。
4、opacity: 1;将伪元素的透明度设为1，使其可见。
5、margin: 0 auto;水平居中对齐。
6、transform: scale(0.8);缩小伪元素至原来的80%。
7、transition: opacity .5s;在透明度变化时，平滑过渡0.5秒。
8、filter: blur(calc(var(--card-height) / 6));为伪元素添加模糊效果，模糊量为卡片高度的六分之一。

@keyframes定义旋转动画
1、@keyframes spin定义一个名为spin的关键帧动画。
2、0% { --rotate: 0deg; }和100% { --rotate: 360deg; }表示动画从0度旋转到360度，即完成一整圈旋转。