Rumah > Artikel > hujung hadapan web > 如何使用CSS实现变色旋转动画的动态效果
这篇文章给大家介绍的内容是关于如何使用CSS实现变色旋转动画的动态效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
定义 dom,容器中包含 9 个元素:
<div class="container"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
定义容器尺寸:
.container { width: 30em; height: 30em; font-size: 12px; }
设置容器中线条的样式:
.container { color: lime; } .container span { position: absolute; width: 5em; height: 5em; border-style: solid; border-width: 1em 1em 0 0; border-color: currentColor transparent; border-radius: 50%; }
让线条在容器中居中显示:
.container { display: flex; align-items: center; justify-content: center; }
定义变量,使线条从中心向外侧逐渐延伸:
.container span { --diameter: calc(5em + (var(--n) - 1) * 3em); width: var(--diameter); height: var(--diameter); } .container span:nth-child(1) { --n: 1; } .container span:nth-child(2) { --n: 2; } .container span:nth-child(3) { --n: 3; } .container span:nth-child(4) { --n: 4; } .container span:nth-child(5) { --n: 5; } .container span:nth-child(6) { --n: 6; } .container span:nth-child(7) { --n: 7; } .container span:nth-child(8) { --n: 8; } .container span:nth-child(9) { --n: 9; }
设置让线条旋转的动画效果:
.container span { animation: rotating linear infinite; animation-duration: calc(5s / (9 - var(--n) + 1)); } @keyframes rotating { to { transform: rotate(1turn); } }
定义改变颜色的动画效果,以色相环一周 360 度为 100%,--percent 变量是指位于这个 100% 的哪个位置:
@keyframes change-color { 0%, 100% { --percent: 0; } 10% { --percent: 10; } 20% { --percent: 20; } 30% { --percent: 30; } 40% { --percent: 40; } 50% { --percent: 50; } 60% { --percent: 60; } 70% { --percent: 70; } 80% { --percent: 80; } 90% { --percent: 90; } }
最后,把改变颜色的动画效果应用到容器上:
.container { --deg: calc(var(--percent) / 100 * 360deg); color: hsl(var(--deg), 100%, 50%); animation: change-color 5s linear infinite; }
大功告成!
相关文章推荐:
Atas ialah kandungan terperinci 如何使用CSS实现变色旋转动画的动态效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!