使用 html css 和 javascript 的催眠螺旋错觉
- Mary-Kate Olsen原创
- 2024-12-04 15:42:12851浏览
<html lang="zh-cn">
<头>
<title>催眠螺旋动画</title>
* {
保证金：0；
填充：0；
框大小：边框框；
背景：#000；
溢出：隐藏；
颜色：#fff；
}
身体 {
显示：柔性；
调整内容：居中；
对齐项目：居中；
高度：100vh；
}
.螺旋{
位置：相对；
宽度：200px；
高度：200px；
动画：旋转4s线性无限；
}
.spiral::之前{
内容： '';
位置：绝对；
顶部：0；
左：0；
宽度：100%；
高度：100%；
边界半径：50%；
边框：2px实心透明；
边框图像：圆锥梯度（从 0deg、#f00、#ff0、#0f0、#0ff、#00f、#f0f、#f00）；
边框图像切片：1；
动画：animateSpiral 10s线性无限；
}
。海浪 {
位置：绝对；
顶部：50%；
左：50%；
变换：翻译（-50%，-50%）；
边界半径：50%；
边框: 2px 实心 rgba(255, 255, 255, 0.3);
动画：expandWave 1s 缓出无限；
}
@关键帧旋转{
0% { 变换：旋转(0deg); }
100% { 变换：旋转(360deg); }
}
@keyframes animateSpiral {
0%, 100% { 变换: 缩放(1); }
50% { 变换：缩放（0.5）； }
}
@keyframes ExpandWave {
0% {
宽度：0；
高度：0；
不透明度：1；
}
100% {
宽度：500px；
高度：500px；
不透明度：0；
}
}
</风格>
</头>
<div>
</div>
以上是使用 html css 和 javascript 的催眠螺旋错觉的详细内容。更多信息请关注PHP中文网其他相关文章！
JavaScript css html using display position overflow margin padding border viewport background transform animation flex Translate
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn