|
設(shè)頁面中有<div class=" planet "></div>，用來繪制一個(gè)行星和衛(wèi)星圖形。這個(gè)圖形包括三部分：行星、衛(wèi)星和衛(wèi)星旋轉(zhuǎn)的軌道。定義. planet的樣式規(guī)則如下： .planet { position:absolute; top:80px; left:80px; height:100px; width:100px; border-radius:50%; border:1px solid #f00; animation:rond 3s linear infinite; } .planet:before { content: ""; height:10px; width:10px; position:absolute; background-color:#f00; border-radius:50%; top:50px; left:-5px; } .planet:after { content: ''; height:60px; width:60px; background:#f00; border-radius:50%; position:absolute; top:20px; left:20px; } 可在頁面中顯示如圖1所示的圖案。 圖1 行星和衛(wèi)星 定義關(guān)鍵幀，使得衛(wèi)星在軌道上繞行星旋轉(zhuǎn)。編寫的HTML文件如下。 
<!DOCTYPE html> <html> <head> <title>行星和衛(wèi)星</title> <style> .container { width:350px; height:350px; margin:100px auto; position:relative; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .planet { position:absolute; top:80px; left:80px; height:100px; width:100px; border-radius:50%; border:1px solid #f00; animation:rond 3s linear infinite; } .planet:before { content: ""; height:10px; width:10px; position:absolute; background-color:#f00; border-radius:50%; top:50px; left:-5px; } .planet:after { content: ''; height:60px; width:60px; background:#f00; border-radius:50%; position:absolute; top:20px; left:20px; } @keyframes rond { 0% {transform : rotate(0deg);} 100% {transform : rotate(360deg);} } </style> </head> <body> <div class="container"> <div class="planet"></div> </div> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖2所示的動(dòng)畫效果。
圖2 繞行星旋轉(zhuǎn)的衛(wèi)星 在圖2中有一顆紅色的小衛(wèi)星繞著紅色的衛(wèi)星旋轉(zhuǎn)，再加入一個(gè)藍(lán)色的小衛(wèi)星繞著藍(lán)色的行星旋轉(zhuǎn)。可以編寫如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>行星和衛(wèi)星</title> <style> .container { width:350px; height:350px; margin:100px auto; position:relative; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .planet1 { position:absolute; top:80px; left:80px; height:100px; width:100px; border-radius:50%; border:1px solid #f00; animation:rond 3s linear infinite; } .planet1:before { content: ""; height:10px; width:10px; position:absolute; background-color:#f00; border-radius:50%; top:50px; left:-5px; } .planet1:after { content: ''; height:60px; width:60px; background:#f00; border-radius:50%; position:absolute; top:20px; left:20px; } .planet2 { position:absolute; top:180px; left:180px; height:80px; width:80px; border-radius:50%; border:1px solid #00f; animation:rond 3s linear infinite; } .planet2:before { content: ""; height:10px; width:10px; position:absolute; background-color:#00f; border-radius:50%; top:40px; left:-5px; } .planet2:after { content: ''; height:40px; width:40px; background:#00f; border-radius:50%; position:absolute; top:20px; left:20px; } @keyframes rond { 0% {transform : rotate(0deg);} 100% {transform : rotate(360deg);} } </style> </head> <body> <div class="container"> <div class="planet1"></div> <div class="planet2"></div> </div> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖3所示的動(dòng)畫效果。 圖3 繞各自軌道旋轉(zhuǎn)的兩顆衛(wèi)星 上面的HTML文件中，為了繪制兩顆行星，頁面中定義了兩個(gè)div：一個(gè)類名為planet1，另一個(gè)名為planet2。分別為兩個(gè)類定義樣式規(guī)則，這兩個(gè)類的樣式規(guī)則基本相同，復(fù)制后略作修改即可。 若在頁面中搞多個(gè)繞各自軌道旋轉(zhuǎn)的衛(wèi)星怎么辦呢？采用類似的方法（定義類名為planet3、planet4、…等層，再復(fù)制樣式規(guī)則略作修改）雖然可以實(shí)現(xiàn)，但重復(fù)代碼太多，導(dǎo)致HTML文件大小偏大。因此，采用自定義變量的方式更好些。 比較類.planet1和.planet2的樣式規(guī)則定義，可以為一個(gè)繞軌道旋轉(zhuǎn)的衛(wèi)星抽象出5個(gè)屬性：表示行星大小的--size、表示行星位置的--top和--left，表示衛(wèi)星旋轉(zhuǎn)速度的—speed、表示顏色的--color。 編寫的HTML文件內(nèi)容如下。
<!DOCTYPE html> <html> <head> <title>行星和衛(wèi)星</title> <style> .container { width:350px; height:350px; margin:100px auto; position:relative; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .planet { position:absolute; top:var(--top); left:var(--left); height:calc(var(--size) + 40px); width:calc(var(--size) + 40px); border-radius:50%; border:1px solid var(--color); animation:rond var(--speed) linear infinite; } .planet:before { content: ""; height:10px; width:10px; position:absolute; background-color:var(--color); border-radius:50%; top:calc(var(--size) / 2 + 20px); left:-5px; } .planet:after { content: ''; height:var(--size); width:var(--size); background:var(--color); border-radius:50%; position:absolute; top:20px; left:20px; } @keyframes rond { 0% {transform : rotate(0deg);} 100% {transform : rotate(360deg);} } </style> </head> <body> <div class="container"> <div class="planet" style="--size:60px;--left:50px; --top: 30px; --color:#f00; --speed: 3s;"></div> <div class="planet" style="--size:60px;--left:200px; --top: 30px; --color:#f0f; --speed: 3s;"></div> <div class="planet" style="--size:40px;--left:25px; --top: 135px; --color:#ff0; --speed: 2.5s;"></div> <div class="planet" style="--size:40px;--left:135px; --top: 135px; --color:#0f0; --speed: 2.5s;"></div> <div class="planet" style="--size:40px;--left:245px; --top: 135px; --color:#0ff; --speed: 2.5s;"></div> <div class="planet" style="--size:60px;--left:50px; --top: 220px; --color:#00f; --speed: 3s;"></div> <div class="planet" style="--size:60px;--left:200px; --top: 220px; --color:#800080; --speed: 3s;"></div> </div> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖4所示的動(dòng)畫效果。
圖4 繞各自軌道旋轉(zhuǎn)的七顆衛(wèi)星 通過這個(gè)例子，可以體會(huì)CSS中自定義變量的使用方法。 |
|
|
