CSS动画实例：双螺旋旋转
设页面中有，定义. ele的样式规则如下：
.ele
{
position: relative;
width: 1px;
height: 100px;
margin: 10px 10px;
border-left: 1px #B0B0B0 dashed;
}
.ele::before, .ele::after
{
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
.ele::before
{
top: -2px;
background: black;
}
.ele:after
{
bottom: -2px;
background: white;
}
可以绘制出如图1所示的图案，在一根小棍的两端分别有一个黑圆和一个白圆。
图1 一根小棍两端的黑圆和白圆
定义关键帧，使得图1的图案绕X轴旋转，呈现出如图2所示的效果。
图2 绕X轴旋转的黑圆和白圆
在页面中并排放置20个如图1所示的图案，让它们以不同的时间延迟执行动画过程。编写如下的HTML文件。
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图3所示的动画效果。
图3 双螺旋旋转（1）
图3的动画效果是通过黑圆和白圆绕X轴旋转实现的。我们也可以通过黑圆和白圆在Y轴上适当平移来实现。
在一行中选定13个位置，每个位置放置一个黑圆和一个白圆（共需设定26个div）。定义关键帧movement，实现黑白圆在Y轴上平移；定义关键帧size-opacity，改变黑白圆的大小和透明度。
编写如下的HTML文件。
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图4所示的动画效果。
图4 双螺旋旋转（2）
