企业网站素材图片,设计网站哪个,南京家装口碑排名前十,小发明小制作简单易学MENU 前言效果图htmlstyle 前言 代码段定义一个名为Magic Card的卡片#xff0c;并通过一系列CSS属性和动画效果来美化和增强该卡片的视觉效果。 效果图 html
div classcardMagic Card
/divstyle
代码
property --rotate {syntax: a… MENU 前言效果图htmlstyle 前言 代码段定义一个名为Magic Card的卡片并通过一系列CSS属性和动画效果来美化和增强该卡片的视觉效果。 效果图 html
div classcardMagic Card
/divstyle
代码
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度即完成一整圈旋转。
