在页面中放置一个类名为container的层作为容器，在该层中再定义一个名为shape的子层，HTML代码描述如下：
div class="container">
div class="shape">/div>
/div>
分别为container和shape定义CSS样式规则如下：
.container
{
margin: 0 auto;
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
display: block;
border: 4px solid rgba(255, 0, 0, 0.9);
background:#d8d8d8;
border-radius: 10%;
}
.shape
{
position: absolute;
width: 80%;
height: 45%;
left: 10%;
bottom:30%;
border-radius: 100% 4px;
opacity: 0.6;
background: #fffe33;
}
在CSS样式的作用下，这2个层在浏览器中显示如图1所示，其中子层显示为1个淡黄色的叶片。
图1 叶片
若将图1所示的叶片每隔10°复制一次，复制17次后，18个叶片将围成一个圆周。为了得到这个圆周图案，在container层中定义18个名为shape的子层，并且为每个子层设置两个变量：表示该子层旋转角度的变量—rotation和表示该子层背景色的变量—color。
编写的HTML文件内容如下。
View Code
在浏览器中打开包含这段HTML代码的html文件，可以看到如图2所示的图案。
图2 18个叶片组成的图案
现在让这18个叶片旋转起来，编写关键帧定义为：
@keyframes rotate
{
from { transform: rotate(var(--rotation)); }
to { transform: rotate(360deg); }
}
然后在.shape样式定义中加上一句“animation: rotate 3s alternate infinite ease-in-out;”，此时，18个叶片会旋转起来，收拢为1个叶片，之后又旋转展开为18个叶片，如图3所示。
图3 旋转后收拢并展开的叶片
由于定义关键帧@keyframes rotate中结束帧状态均是旋转360deg，因此18个叶片会收拢成1个叶片。若想让18个叶片各自旋转360°不收拢起来，可修改关键帧定义如下：
@keyframes rotate
{
from { transform: rotate(var(--rotation)); }
to { transform: rotate(calc(360deg + var(--rotation))); }
}
此时，在浏览器中呈现出如图4所示的效果。
图4 旋转的叶片
图4中叶片较密，且不是绕一个方向匀速旋转。为此，去掉9个偶数项子层(即旋转角度为-10deg、-30deg、…、-170deg的子层)，且修改动画属性定义语句为：
animation: rotate 3s linear infinite;
则呈现出如图5所示的动画效果。
图5 绕一个方向匀速旋转的叶片
完整的HTML文件内容如下。
