設頁面中有<div ></div>，若定義. vortex的樣式規則和關鍵幀如下：
.vortex
{
position: relative;
margin: 100px auto;
border-radius: 50%;
width:200px;
height:200px;
border: 4px solid transparent;
animation: rotate 3s linear infinite;
border-top-color: rgba(255, 0, 0, 0.8);
border-bottom-color: rgba(0, 0,255, 0.8);
}
@keyframes rotate
{
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
可在頁面中呈現出如圖1所示的旋轉影片，
圖1 相對兩段弧的旋轉
若在頁面中放置9個如圖1所示的弧段，并且這個9個弧段所在的圓同圓心，9個圓的半徑依次相差10px，定義影片關鍵幀，使這9個弧段旋轉起來，可得到渦旋的影片效果，
撰寫的HTML檔案如下，
<!DOCTYPE html>
<html>
<title>渦旋</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:400px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.vortex
{
position: relative;
margin: 50px auto;
width: 300px;
height: 300px;
display: block;
overflow: hidden;
}
.vortex div
{
box-sizing: border-box;
border-radius: 50%;
padding: 10px;
height: 100%;
border: 4px solid transparent;
animation: rotate linear 4s infinite;
border-top-color: rgba(255, 0, 0, 0.8);
border-bottom-color: rgba(0, 0,255, 0.8);
}
@keyframes rotate
{
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
div:hover
{
animation-play-state: paused;
}
</style>
</head>
<body>
<div >
<div class='vortex'>
<div><div><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div></div>
</div>
</div>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖2所示的影片效果，
圖2 渦旋（1）
在影片運行時，若將滑鼠移動到某個弧段對應的<div>上，則該<div>之內的弧段會旋轉，之外的弧段暫停旋轉，呈現出如圖3所示的影片效果，
圖3 可暫停旋轉的渦旋
若將上面.vortex div樣式定義中的陳述句“border-bottom-color: rgba(0, 0,255, 0.8);”，修改為“border-left-color: rgba(255, 0,0,0.5);”，其余部分保持不變，則紅色弧段為一個半圓，此時呈現出如圖4所示的影片效果，
圖4 渦旋（2）
若再將.vortex div樣式定義中的陳述句“animation: rotate linear 4s infinite;”修改為：
animation: rotate 3s cubic-bezier(0.55, 0.38, 0.21, 0.88) infinite;
則影片的執行程序不再是勻速的，而是按在立方貝塞爾函式中定義速度函式進行運行，此時呈現出如圖5所示的影片效果，
圖5 渦旋（3）
若只是洗掉掉.vortex div樣式定義中的陳述句border-bottom-color: rgba(0, 0,255, 0.8);，則藍色弧段被刪掉，只剩下紅色弧段，此時呈現出如圖6所示的影片效果，
圖6 渦旋（4）
若修改.vortex div樣式定義如下：
.vortex div
{
box-sizing: border-box;
border-radius: 50%;
padding: 10px;
height: 100%;
border: 4px solid transparent;
animation: rotate 3s linear infinite;
border-top-color: rgba(255, 0, 0, 0.5);
border-left-color: rgba(255,255,0,0.5);
border-right-color: rgba(0,0,255,0.5);
}
此時圓弧由黃色、紅色和藍色三段組成，呈現出如圖7所示的影片效果，
圖7 渦旋（5）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/899.html
標籤：Html/Css
上一篇：輕輕松松學CSS:float