分享CSS3旋转动画效果

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程 CSS3动画 CSS3教程

CSS3旋转动画效果是一种非常酷炫的网页设计技巧，它可以让元素在页面上旋转起来。这种效果可以通过CSS3的`transform`属性来实现，具体来说就是使用`rotate()`函数来设置元素的旋转角度和方向。例如，我们可以使用以下代码来让一个div元素在页面上顺时针旋转360度： ```css div { animation: rotation 2s linear infinite; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` 这段代码中，`animation`属性用于定义一个动画名称为`rotation`，持续时间为2秒，线性速度变化，无限循环。`@keyframes`规则用于定义动画的关键帧，这里我们定义了从0度到360度的

定义 dom，容器中包含 9 个元素：

<divclass="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;}.containerspan{position:absolute;width:5em;height:5em;border-style:solid;border-width:1em1em00;border-color:currentColortransparent;border-radius:50%;}

让线条在容器中居中显示：

.container{display:flex;align-items:center;justify-content:center;}

定义变量，使线条从中心向外侧逐渐延伸：

.containerspan{--diameter:calc(5em+(var(--n)-1)*3em);width:var(--diameter);height:var(--diameter);}.containerspan:nth-child(1){--n:1;}.containerspan:nth-child(2){--n:2;}.containerspan:nth-child(3){--n:3;}.containerspan:nth-child(4){--n:4;}.containerspan:nth-child(5){--n:5;}.containerspan:nth-child(6){--n:6;}.containerspan:nth-child(7){--n:7;}.containerspan:nth-child(8){--n:8;}.containerspan:nth-child(9){--n:9;}

设置让线条旋转的动画效果：

.containerspan{animation:rotatinglinearinfinite;animation-duration:calc(5s/(9-var(--n)+1));}@keyframesrotating{to{transform:rotate(1turn);}}

定义改变颜色的动画效果，以色相环一周 360 度为 100%，--percent 变量是指位于这个 100% 的哪个位置：

@keyframeschange-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-color5slinearinfinite;}