CSS動畫例項：花瓣發光旋轉
阿新 • • 發佈：2020-08-29
1．旋轉的花瓣
設頁面中有<div class=” petal”></div>，若定義.shape的樣式規則為：
.petal
{
width:100px;
height:100px;
background-color:#f00;
border-radius:0 100% 0 100%;
}
可在頁面中顯示如圖1所示的花瓣圖形。
圖1 花瓣（1）
若修改.shape樣式規則中border-radius屬性的定義為：border-radius:100% 0 100% 0;，則在頁面中顯示如圖2所示的花瓣圖形。
圖2 花瓣（2）
將圖1和圖2所示的花瓣各兩片組合起來，可構成一個四葉花圖案。定義關鍵幀使四葉花旋轉起來。編寫的HTML檔案內容如下。
<!DOCTYPE html> <html> <title>旋轉的花瓣</title> <head> <style> .container { position: relative; margin: 50px auto; width: 400px; height:300px; background:#d8d8d8; overflow:hidden; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%View Code; } .flower { width:200px; height:200px; margin:50px auto; animation:rotate 2s linear infinite; } .petal { width:100px; height:100px; background-color:#f00; float:left; } .petal:nth-child(1) { border-radius:0 100% 0 100%; } .petal:nth-child(2) { border-radius:100% 0 100% 0; } .petal:nth-child(3) { border-radius:100% 0 100% 0; } .petal:nth-child(4) { border-radius:0 100% 0 100%; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform:rotate(360deg); } } </style> </head> <body> <div class="container"> <div class="flower"> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> </div> </div> </body> </html>
在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以呈現出如圖3所示的動畫效果。
圖3 旋轉的四葉花（1）
編寫如下的HTML檔案。
<!DOCTYPE html> <html> <title>旋轉的花瓣</title> <head> <style> .container { position: relative; margin: 50px auto; width: 400px; height:300px; background:#d8d8d8; overflow:hidden; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .flower { width:204px; height:204px; margin:50px auto; animation:rotate 2s linear infinite; } .petal { width:100px; height:100px; float:left; background-color:#f00; border:2px solid yellow; } .petal:nth-child(1) { border-radius:100% 100% 0 100%; border-right:0; border-bottom:0; } .petal:nth-child(2) { border-radius:100% 100% 100% 0; border-left:0; border-bottom:0; } .petal:nth-child(3) { border-radius:100% 0 100% 100%; border-top:0; border-right:0; } .petal:nth-child(4) { border-radius:0 100% 100% 100%; border-left:0; border-top:0; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform:rotate(360deg); } } </style> </head> <body> <div class="container"> <div class="flower"> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> </div> </div> </body> </html>View Code
在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以呈現出如圖4所示的動畫效果。
圖4 旋轉的四葉花（2）
編寫如下的HTML檔案。
<!DOCTYPE html> <html> <title>旋轉的花瓣</title> <head> <style> .container { position: relative; margin: 50px auto; width: 400px; height:300px; background:#d8d8d8; overflow:hidden; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .flower { width:200px; height:200px; margin:50px auto; position: relative; animation:rotate 2s linear infinite; } .petal { position: absolute; width:100px; height:100px; background-color:#f00; border-radius:0 100% 0 100%; transform-origin: right bottom; } .petal:nth-child(2) { transform: rotate(72deg); } .petal:nth-child(3) { transform: rotate(144deg); } .petal:nth-child(4) { transform: rotate(216deg); } .petal:nth-child(5) { transform: rotate(288deg); } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform:rotate(360deg); } } </style> </head> <body> <div class="container"> <div class="flower"> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> </div> </div> </body> </html>View Code
在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以呈現出如圖5所示的動畫效果。動畫中的五瓣花的5個花瓣是如圖1所示花瓣每一個在前一個花瓣基礎上旋轉72deg得到。讀者可修改HTML檔案，自行演示旋轉的三瓣花、六瓣花。
圖5 旋轉的五瓣花
2．花瓣發光旋轉
設頁面中有<div class=” petal”></div>，若定義.shape的樣式規則為：
.petal
{
height: 80px;
width: 32px;
background-color:#fff;
border-radius: 0 160px 0 160px;
box-shadow: inset 0 0 0 2px #E645D0, 0 0 24px 0 #E645D0;
}
可在頁面中顯示如圖6所示的花瓣圖形，這個花瓣圖形通過陰影的方式形成發光效果。
圖6 花瓣（3）
將8片如圖6所示的花瓣適當安排位置，使它們圍成一個圓周。定義關鍵幀，使花瓣圍成的圓周旋轉起來。編寫的HTML檔案如下。
<!DOCTYPE html> <html> <title>發光旋轉的花瓣</title> <head> <style> .container { position: relative; margin: 50px auto; width: 400px; height:300px; background:#d8d8d8; overflow:hidden; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .flower { width:200px; height:200px; margin:50px auto; position: relative; animation:spin 2s linear infinite; } .petal { height: 80px; width: 32px; margin: auto; position: absolute; background-color:#fff; border-radius: 0 160px 0 160px; box-shadow: inset 0 0 0 2px #E645D0, 0 0 24px 0 #E645D0; left:var(--left); right:var(--right); top:var(--top); bottom:var(--bottom); transform: rotate(var(--degree)); animation: shine 1s var(--delay) ease infinite; } @keyframes shine { 0%,100% { } 50% { box-shadow: inset 0 0 0 2px #17E1E6, 0 0 24px 0 #17E1E6; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } </style> </head> <body> <div class="container"> <div class="flower"> <div class="petal" style="--left: 0; --right: 0; --top: 0;--bottom:120px; --degree: 45deg;--delay:0;"></div> <div class="two petal" style="--left: 88px; --right: 0; --top: 0;--bottom:88px; --degree: 90deg;--delay:0.125s;"></div> <div class="three petal" style="--left: 120px; --right: 0; --top: 0;--bottom:0; --degree: 135deg;--delay:0.25s;"></div> <div class="four petal" style="--left: 88px; --right: 0; --top: 88px;--bottom:0; --degree: 180deg;--delay:0.375s;"></div> <div class="five petal" style="--left: 0; --right: 0; --top: 120px;--bottom:0; --degree: 225deg;--delay:0.5s;"></div> <div class="six petal" style="--left: 0; --right: 88px; --top: 88px;--bottom:0; --degree: 270deg;--delay:0.625s;"></div> <div class="seven petal" style="--left: 0; --right: 120px; --top: 0;--bottom:0; --degree: 315deg;--delay:0.75s;"></div> <div class="eight petal" style="--left: 0; --right: 88px; --top: 0;--bottom:88px; --degree: 360deg;--delay:0.875s;"></div> </div> </div> </body> </html>View Code
在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以呈現出如圖7所示的動畫效果。
圖7 發光旋轉的花瓣