|
在頁面中放置一個(gè)類名為container的層作為容器，在該層中再定義一個(gè)名為shape的子層，HTML代碼描述如下： <div class="container"> <div class="shape"></div> </div> 分別為container和shape定義CSS樣式規(guī)則如下： .container { margin: 0 auto; width: 500px; height: 500px; position: relative; overflow: hidden; display: block; border: 4px solid rgba(255, 0, 0, 0.9); background:#d8d8d8; border-radius: 10%; } .shape { position: absolute; width: 80%; height: 45%; left: 10%; bottom:30%; border-radius: 100% 4px; opacity: 0.6; background: #fffe33; } 在CSS樣式的作用下，這2個(gè)層在瀏覽器中顯示如圖1所示，其中子層顯示為1個(gè)淡黃色的葉片。 圖1 葉片 若將圖1所示的葉片每隔10°復(fù)制一次，復(fù)制17次后，18個(gè)葉片將圍成一個(gè)圓周。為了得到這個(gè)圓周圖案，在container層中定義18個(gè)名為shape的子層，并且為每個(gè)子層設(shè)置兩個(gè)變量：表示該子層旋轉(zhuǎn)角度的變量—rotation和表示該子層背景色的變量—color。 編寫的HTML文件內(nèi)容如下。 
<!DOCTYPE html> <html> <head> <title>旋轉(zhuǎn)的葉片</title> <style> .container { margin: 0 auto; width: 500px; height: 500px; position: relative; overflow: hidden; display: block; border: 4px solid rgba(255, 0, 0, 0.9); background:#d8d8d8; border-radius: 10%; } .shape { position: absolute; width: 80%; height: 45%; left: 10%; bottom:30%; border-radius: 100% 4px; opacity: 0.6; } .shape:nth-child(1n+0) { background: var(--color); transform: rotate(var(--rotation)); } </style> </head> <body> <div class="container"> <div class="shape" style="--rotation: 0deg;--color:#fffe33"></div> <div class="shape" style="--rotation: -10deg;--color:#feff00"></div> <div class="shape" style="--rotation: -20deg;--color:#ff9935"></div> <div class="shape" style="--rotation: -30deg;--color:#f87e07"></div> <div class="shape" style="--rotation: -40deg;--color:#ff339c"></div> <div class="shape" style="--rotation: -50deg;--color:#ff007e"></div> <div class="shape" style="--rotation: -60deg;--color:#ff34ff"></div> <div class="shape" style="--rotation: -70deg;--color:#ff00ff"></div> <div class="shape" style="--rotation: -80deg;--color:#9a34ff"></div> <div class="shape" style="--rotation: -90deg;--color:#7f00ff"></div> <div class="shape" style="--rotation: -100deg;--color:#3233ff"></div> <div class="shape" style="--rotation: -110deg;--color:#0000fe"></div> <div class="shape" style="--rotation: -120deg;--color:#3399fe"></div> <div class="shape" style="--rotation: -130deg;--color:#0978f5"></div> <div class="shape" style="--rotation: -140deg;--color:#33fffe"></div> <div class="shape" style="--rotation: -150deg;--color:#32ff98"></div> <div class="shape" style="--rotation: -160deg;--color:#99ff32"></div> <div class="shape" style="--rotation: -170deg;--color:#81fe00"></div> </div> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以看到如圖2所示的圖案。
圖2 18個(gè)葉片組成的圖案 現(xiàn)在讓這18個(gè)葉片旋轉(zhuǎn)起來，編寫關(guān)鍵幀定義為： @keyframes rotate { from { transform: rotate(var(--rotation)); } to { transform: rotate(360deg); } } 然后在.shape樣式定義中加上一句“animation: rotate 3s alternate infinite ease-in-out;”，此時(shí)，18個(gè)葉片會(huì)旋轉(zhuǎn)起來，收攏為1個(gè)葉片，之后又旋轉(zhuǎn)展開為18個(gè)葉片，如圖3所示。 圖3 旋轉(zhuǎn)后收攏并展開的葉片 由于定義關(guān)鍵幀@keyframes rotate中結(jié)束幀狀態(tài)均是旋轉(zhuǎn)360deg，因此18個(gè)葉片會(huì)收攏成1個(gè)葉片。若想讓18個(gè)葉片各自旋轉(zhuǎn)360°不收攏起來，可修改關(guān)鍵幀定義如下： @keyframes rotate { from { transform: rotate(var(--rotation)); } to { transform: rotate(calc(360deg + var(--rotation))); } } 此時(shí)，在瀏覽器中呈現(xiàn)出如圖4所示的效果。 圖4 旋轉(zhuǎn)的葉片 圖4中葉片較密，且不是繞一個(gè)方向勻速旋轉(zhuǎn)。為此，去掉9個(gè)偶數(shù)項(xiàng)子層（即旋轉(zhuǎn)角度為-10deg、-30deg、…、-170deg的子層），且修改動(dòng)畫屬性定義語句為： animation: rotate 3s linear infinite; 則呈現(xiàn)出如圖5所示的動(dòng)畫效果。 圖5 繞一個(gè)方向勻速旋轉(zhuǎn)的葉片 完整的HTML文件內(nèi)容如下。
<!DOCTYPE html> <html> <head> <title>旋轉(zhuǎn)的葉片</title> <style> .container { margin: 0 auto; width: 500px; height: 500px; position: relative; overflow: hidden; display: block; border: 4px solid rgba(255, 0, 0, 0.9); background:#d8d8d8; border-radius: 10%; } .shape { position: absolute; width: 80%; height: 45%; left: 10%; bottom:30%; border-radius: 100% 4px; opacity: 0.6; animation: rotate 3s linear infinite; } .shape:nth-child(1n+0) { background: var(--color); transform: rotate(var(--rotation)); } @keyframes rotate { from { transform: rotate(var(--rotation)); } to { transform: rotate(calc(360deg + var(--rotation))); } } </style> </head> <body> <div class="container"> <div class="shape" style="--rotation: 0deg;--color:#fffe33"></div> <div class="shape" style="--rotation: -20deg;--color:#ff9935"></div> <div class="shape" style="--rotation: -40deg;--color:#ff339c"></div> <div class="shape" style="--rotation: -60deg;--color:#ff34ff"></div> <div class="shape" style="--rotation: -80deg;--color:#9a34ff"></div> <div class="shape" style="--rotation: -100deg;--color:#3233ff"></div> <div class="shape" style="--rotation: -120deg;--color:#3399fe"></div> <div class="shape" style="--rotation: -140deg;--color:#33fffe"></div> <div class="shape" style="--rotation: -160deg;--color:#99ff32"></div> </div> </body> </html> |
|
|
