CSS动画实例：涡旋
设页面中有<div class=" vortex "></div>，若定义. vortex的样式规则和关键帧如下：
.vortex
{
position: relative;
margin: 100px auto;
border-radius: 50%;
width:200px;
height:200px;
border: 4px solid transparent;
animation: rotate 3s linear infinite;
border-top-color: rgba(255, 0, 0, 0.8);
border-bottom-color: rgba(0, 0,255, 0.8);
}
@keyframes rotate
{
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
可在页面中呈现出如图1所示的旋转动画。
图1 相对两段弧的旋转
若在页面中放置9个如图1所示的弧段，并且这个9个弧段所在的圆同圆心，9个圆的半径依次相差10px，定义动画关键帧，使这9个弧段旋转起来，可得到涡旋的动画效果。
编写的HTML文件如下。
<!DOCTYPE html>
<html>
<title>涡旋</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:400px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.vortex
{
position: relative;
margin: 50px auto;
width: 300px;
height: 300px;
display: block;
overflow: hidden;
}
.vortex div
{
box-sizing: border-box;
border-radius: 50%;
padding: 10px;
height: 100%;
border: 4px solid transparent;
animation: rotate linear 4s infinite;
border-top-color: rgba(255, 0, 0, 0.8);
border-bottom-color: rgba(0, 0,255, 0.8);
}
@keyframes rotate
{
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
div:hover
{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="container">
<div class='vortex'>
<div><div><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div></div>
</div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图2所示的动画效果。
图2 涡旋（1）
在动画运行时，若将鼠标移动到某个弧段对应的<div>上，则该<div>之内的弧段会旋转，之外的弧段暂停旋转，呈现出如图3所示的动画效果。
图3 可暂停旋转的涡旋
若将上面.vortex div样式定义中的语句“border-bottom-color: rgba(0, 0,255, 0.8);”，修改为“border-left-color: rgba(255, 0,0,0.5);”，其余部分保持不变，则红色弧段为一个半圆，此时呈现出如图4所示的动画效果。
图4 涡旋（2）
若再将.vortex div样式定义中的语句“animation: rotate linear 4s infinite;”修改为：
animation: rotate 3s cubic-bezier(0.55, 0.38, 0.21, 0.88) infinite;
则动画的执行过程不再是匀速的，而是按在立方贝塞尔函数中定义速度函数进行运行，此时呈现出如图5所示的动画效果。
图5 涡旋（3）
若只是删除掉.vortex div样式定义中的语句border-bottom-color: rgba(0, 0,255, 0.8);，则蓝色弧段被删掉，只剩下红色弧段，此时呈现出如图6所示的动画效果。
图6 涡旋（4）
若修改.vortex div样式定义如下：
.vortex div
{
box-sizing: border-box;
border-radius: 50%;
padding: 10px;
height: 100%;
border: 4px solid transparent;
animation: rotate 3s linear infinite;
border-top-color: rgba(255, 0, 0, 0.5);
border-left-color: rgba(255,255,0,0.5);
border-right-color: rgba(0,0,255,0.5);
}
此时圆弧由黄色、红色和蓝色三段组成，呈现出如图7所示的动画效果。
图7 涡旋（5）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了