CSS动画实例：太极图在旋转
利用CSS可以构造出图形，然后可以对构造的图形添加动画效果。下面我们通过旋转的太极图、放大的五角星、跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法。
1．旋转的太极图
设页面中有<div class="shape"></div>，若为. shape设置样式规则如下：
.shape
{
width: 192px;
height: 96px;
background: #fff;
border-color: #000;
border-style: solid;
border-width: 4px 4px 100px 4px;
border-radius: 50%;
}
可在页面中显示如图1所示的图形。
图1 上下两个半圆
若将. Shape的样式规则设置如下：
.shape
{
background: #000;
border: 36px solid #fff;
border-radius: 50%;
width: 24px;
height: 24px;
}
则可在页面中显示如图2所示的图形。
图2 黑心圆
如将黑心圆的背景填充色和边框填充色交换一下，则可在页面中显示如图3所示的图形。
图3 白心圆
将图2和图3适当地放入图1中，则可以绘制出一个太极图。
为这个太极图定义关键帧，使得它旋转起来。编写的HTML文件内容如下。
<!DOCTYPE html> <html> <head> <title>旋转的太极图</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .shape { width: 192px; height: 96px; background: #fff; border-color: #000; border-style: solid; border-width: 4px 4px 100px 4px; border-radius: 50%; position: relative; animation:rotate 2s linear infinite; } .shape:before { content: ""; position: absolute; top: 50%; left: 0; background: #fff; border: 36px solid #000; border-radius: 50%; width: 24px; height: 24px; } .shape:after { content: ""; position: absolute; top: 50%; left: 50%; background: #000; border: 36px solid #fff; border-radius:50%; width: 24px; height: 24px; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform:rotate(360deg); } } </style> </head> <body> <div class="container"> <div class="shape"></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图4所示的动画效果。
图4 旋转的太极图
2．由小到大的五角星
设页面中有<div class="shape"></div>，若为. shape设置样式规则如下：
.shape
{
position: relative;
display: block;
width:0px;
height:0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom:70px solid red;
transform:rotate(35deg);
}
.shape:before
{
content: '';
position: absolute;
width: 0px;
height: 0px;
top: -45px;
left: -62.5px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid green;
transform: rotate(-35deg);
}
.shape:after
{
content: '';
position: absolute;
width: 0px;
height: 0px;
top: 3px;
left: -105px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid blue;
transform:rotate(-70deg);
}
可在页面中显示如图5所示的五角星。这个五角星是由三个三角形拼成的，为了方便理解，将三个三角形设置成不同的颜色。
图5 由三个三角形拼成的五角星
将三个三角形的颜色都设置成红色，得到一个红色五角星，并为这个五角星定义关键帧，使得它由小慢慢放大。编写的HTML文件内容如下。
<!DOCTYPE html> <html> <head> <title>放大的五角星</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .shape { position: relative; display: block; width:0px; height:0px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom:70px solid red; transform:rotate(35deg); animation:anim 2s linear infinite; } .shape:before { content: ''; position: absolute; width: 0px; height: 0px; top: -45px; left: -62.5px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 80px solid red; transform: rotate(-35deg); } .shape:after { content: ''; position: absolute; width: 0px; height: 0px; top: 3px; left: -105px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 70px solid red; transform:rotate(-70deg); } @keyframes anim { 0% { transform: rotate(35deg) scale(0.2); opacity: 0.1; } 80%,100% { transform: rotate(35deg) scale(1.2); opacity: 1; } } </style> </head> <body> <div class="container"> <div class="shape"></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图6所示的动画效果。
图6 放大的五角星
3．弯月在跳舞
设页面中有<div class="shape"></div>，若为. shape设置样式规则如下：
.shape
{
display: block;
width: 160px;
height: 160px;
background:#ff0000;
border-radius: 50%;
transform: rotateZ(45deg) rotateX(70deg);
}
可在页面中显示如图7所示的图形。
图7 红色斜椭圆
若在.shape样式定义中加上一句：box-shadow: 32px 0px 0 0px #ffffff;，则在页面中显示如图8所示的图形，红色斜椭圆带白色阴影。
图8 带白色阴影的红色斜椭圆（1）
若再将rotateX(70deg)修改为rotateY(70deg)，则在页面中显示如图9所示的图形。
图9 带白色阴影的红色斜椭圆（2）
若定义如下的关键帧，让红色椭圆带的白色阴影在给定的8个点循环运动，可呈现出如图10所示的动画效果。
@keyframes spin
{
0%,100% { box-shadow: 32px 0px 0 0px #ffffff; }
12% { box-shadow: 32px 32px 0 0 #ffffff; }
25% { box-shadow: 0 32px 0 0px #ffffff; }
37% { box-shadow: -32px 32px 0 0 #ffffff; }
50% { box-shadow: -32px 0 0 0 #ffffff; }
62% { box-shadow: -32px -32px 0 0 #ffffff;}
75% { box-shadow: 0px -32px 0 0 #ffffff; }
87% { box-shadow: 32px -32px 0 0 #ffffff; }
}
图10 白色阴影运动效果（1）
若将斜椭圆的填充色设置为背景色，只见到移动的白色阴影，则呈现出如图11所示的动画效果。
图11 白色阴影运动效果（2）
图9对应的白色阴影运动效果如图12所示。
图12 白色阴影运动效果（3）
将图11和图12中运动的两个白色阴影组合起来，编写如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>跳舞的弯月</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .shape { width: 160px; height: 160px; border-radius: 50%; transform: rotateZ(45deg); } .shape:before, .shape:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 160px; height: 160px; border-radius: 50%; animation: 1s spin linear infinite; } .shape:before { transform: rotateX(70deg); } .shape:after { transform: rotateY(70deg); animation-delay: 0.5s; } @keyframes spin { 0%,100% { box-shadow: 32px 0px 0 0px #ffffff; } 12% { box-shadow: 32px 32px 0 0 #ffffff; } 25% { box-shadow: 0 32px 0 0px #ffffff; } 37% { box-shadow: -32px 32px 0 0 #ffffff; } 50% { box-shadow: -32px 0 0 0 #ffffff; } 62% { box-shadow: -32px -32px 0 0 #ffffff;} 75% { box-shadow: 0px -32px 0 0 #ffffff; } 87% { box-shadow: 32px -32px 0 0 #ffffff; } } </style> </head> <body> <div class="container"> <div class="shape"></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图13所示的动画效果，好像两个弯月在跳“双人舞”。
图13 跳“双人舞”的弯月
仿照上面的思想，我们还可以编写如下的HTML文件，实现以原子为中心的电子旋转的动画效果。
<!DOCTYPE html> <html> <head> <title>旋转的电子</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .shape { position: relative; width: 24px; height: 24px; background-color: #f00; border-radius: 50%; animation: anim1 20s infinite linear; } .shape:before, .shape:after { content: ''; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .shape:before { width: 60px; height: 200px; animation: anim2 .8s linear infinite; } .shape:after { width: 200px; height: 60px; animation: anim2 1.2s linear infinite; } @keyframes anim1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes anim2 { 0%, 100% { box-shadow: 2px -2px 0 1.5px #fff; } 25% { box-shadow: 2px 2px 0 1.5px #fff; } 50% { box-shadow: -2px 2px 0 1.5px #fff; } 75% { box-shadow: -2px -2px 0 1.5px #fff;} } </style> </head> <body> <div class="container"> <div class="shape"></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图14所示的动画效果，好像两个电子绕中心原子在各自轨道旋转。
图14 绕中心原子旋转的电子
