CSS动画实例：双螺旋旋转

设页面中有<div class=' ele '></div>，定义. ele的样式规则如下：

.ele

{

position: relative;

1px;

height: 100px;

margin: 10px 10px;

border-left: 1px #B0B0B0 dashed;

}

.ele::before, .ele::after

{

content: '';

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文件。

<!DOCTYPE html>

<html>

<title>双螺旋旋转</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

400px;

height:300px;

background:#d8d8d8;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.dna

{

position: absolute;

360px;

height: 70px;

top:100px;

left:20px;

perspective: 400px;

transform-style: preserve-3d;

}

.ele

{

position: relative;

1px;

height: 70px;

float: left;

margin: 0 8px;

border-left: 1px #B0B0B0 dashed;

animation: run 3s var(--delay) linear infinite;

}

.ele::before, .ele::after

{

content: '';

10px;

height: 10px;

border-radius: 50%;

position: absolute;

left: 50%;

}

.ele::before

{

top: -2px;

background: black;

}

.ele:after

{

bottom: -2px;

background: white;

}

@keyframes run

{

from { transform: rotateX(-360deg);}

to { transform: rotateX(0deg); }

}

</style>

</head>

<body>

</div>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图3所示的动画效果。

图3 双螺旋旋转（1）

图3的动画效果是通过黑圆和白圆绕X轴旋转实现的。我们也可以通过黑圆和白圆在Y轴上适当平移来实现。

在一行中选定13个位置，每个位置放置一个黑圆和一个白圆（共需设定26个div）。定义关键帧movement，实现黑白圆在Y轴上平移；定义关键帧size-opacity，改变黑白圆的大小和透明度。

编写如下的HTML文件。

<!DOCTYPE html>

<html>

<title>双螺旋旋转</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

400px;

height:300px;

background:#d8d8d8;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

display: flex;

justify-content: center;

align-items: center;

}

.dna

{

position: relative;

}

.dot

{

position: absolute;

top: -10px;

left:var(--left);

10px;

height: 10px;

animation: movement 2s var(--delay) infinite ease-in-out;

}

.dot::before

{

content: '';

display: block;

height: 100%;

100%;

background: white;

border-radius: 50%;

animation:size-opacity 2s var(--delay) infinite ease;

}

.dot:nth-of-type(even)::before

{

background-color: black;

}

@Keyframes movement

{

transform: translate3d(0, -25px, 0);

z-index: 0;

}

50%

{

transform: translate3d(0, 25px, 0);

z-index: 10;

}

100%

{

transform: translate3d(0, -25px, 0);

z-index: -5;

}

@Keyframes size-opacity

{

opacity: 1;

transform: scale(1);

}

25%

{

transform: scale(1.5);

}

50%

{

opacity: 1;

}

75%

{

opacity: .35;

transform: scale(0.5);

}

100%

{

opacity: 1;

transform: scale(1);

}

</style>

</head>

<body>

</div>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图4所示的动画效果。

图4 双螺旋旋转（2）