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度，即完成一整圈旋转。
