設頁面中有<div class=' ele '></div>，定義. 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檔案，
<!DOCTYPE html>
<html>
<title>雙螺旋旋轉</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:300px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.dna
{
position: absolute;
width: 360px;
height: 70px;
top:100px;
left:20px;
perspective: 400px;
transform-style: preserve-3d;
}
.ele
{
position: relative;
width: 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: '';
width: 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 >
<div >
<div style="--delay:-0.15s;"></div>
<div style="--delay:-0.3s;"></div>
<div style="--delay:-0.45s;"></div>
<div style="--delay:-0.6s;"></div>
<div style="--delay:-0.75s;"></div>
<div style="--delay:-0.9s;"></div>
<div style="--delay:-1.05s;"></div>
<div style="--delay:-1.2s;"></div>
<div style="--delay:-1.35s;"></div>
<div style="--delay:-1.5s;"></div>
<div style="--delay:-1.65s;"></div>
<div style="--delay:-1.8s;"></div>
<div style="--delay:-1.95s;"></div>
<div style="--delay:-2.1s;"></div>
<div style="--delay:-2.25s;"></div>
<div style="--delay:-2.4s;"></div>
<div style="--delay:-2.55s;"></div>
<div style="--delay:-2.7s;"></div>
<div style="--delay:-2.85s;"></div>
<div style="--delay:-3.0s;"></div>
</div>
</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;
width: 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);
width: 10px;
height: 10px;
animation: movement 2s var(--delay) infinite ease-in-out;
}
.dot::before
{
content: '';
display: block;
height: 100%;
width: 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
{
0%
{
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
{
0%
{
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 >
<div >
<div style="--left:150px; --delay:-0.1s;"></div>
<div style="--left:150px; --delay:-1.2s;"></div>
<div style="--left:125px; --delay:-0.3s;"></div>
<div style="--left:125px; --delay:-1.4s;"></div>
<div style="--left:100px; --delay:-0.5s;"></div>
<div style="--left:100px; --delay:-1.6s;"></div>
<div style="--left:75px; --delay:-0.7s;"></div>
<div style="--left:75px; --delay:-1.8s;"></div>
<div style="--left:50px; --delay:-0.9s;"></div>
<div style="--left:50px; --delay:-2.0s;"></div>
<div style="--left:25px; --delay:-1.1s;"></div>
<div style="--left:25px; --delay:-2.2s;"></div>
<div style="--left:0px; --delay:-1.3s;"></div>
<div style="--left:0px; --delay:-2.4s;"></div>
<div style="--left:-25px; --delay:-1.5s;"></div>
<div style="--left:-25px; --delay:-2.6s;"></div>
<div style="--left:-50px; --delay:-1.7s;"></div>
<div style="--left:-50px; --delay:-2.8s;"></div>
<div style="--left:-75px; --delay:-1.9s;"></div>
<div style="--left:-75px; --delay:-3.0s;"></div>
<div style="--left:-100px; --delay:-2.1s;"></div>
<div style="--left:-100px; --delay:-3.2s;"></div>
<div style="--left:-125px; --delay:-2.3s;"></div>
<div style="--left:-125px; --delay:-3.4s;"></div>
<div style="--left:-150px; --delay:-2.5s;"></div>
<div style="--left:-150px; --delay:-3.6s;"></div>
</div>
</div>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖4所示的影片效果，
圖4 雙螺旋旋轉（2）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/113064.html
標籤：Html/Css
上一篇：vue 3.0 初體驗
下一篇：vue 3.0 初體驗