---

前言

代码段定义一个名为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的样式
color: rgb(88, 199, 250);在悬停时，将文字颜色设置为浅蓝色。
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定义旋转动画
@keyframes spin定义一个名为spin的关键帧动画。
0% { --rotate: 0deg; }和100% { --rotate: 360deg; }表示动画从0度旋转到360度，即完成一整圈旋转。