MENU
- 前言
- 效果图
- Html
- Style
前言
代码段定义一个名为
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度,即完成一整圈旋转。