美女视频漫画,杨幂唱歌的视频,法国美女视频

CSS動(dòng)畫(huà)實(shí)例：行星和衛(wèi)星

2021.09.24

設(shè)頁(yè)面中有<div class=" planet "></div>，用來(lái)繪制一個(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;

}

可在頁(yè)面中顯示如圖1所示的圖案。

圖1 行星和衛(wèi)星

定義關(guān)鍵幀，使得衛(wèi)星在軌道上繞行星旋轉(zhuǎn)。編寫(xiě)的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>

View Code

在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖2所示的動(dòng)畫(huà)效果。

圖2 繞行星旋轉(zhuǎn)的衛(wèi)星

在圖2中有一顆紅色的小衛(wèi)星繞著紅色的衛(wèi)星旋轉(zhuǎn)，再加入一個(gè)藍(lán)色的小衛(wèi)星繞著藍(lán)色的行星旋轉(zhuǎn)?？梢跃帉?xiě)如下的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>

View Code

在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖3所示的動(dòng)畫(huà)效果。

圖3 繞各自軌道旋轉(zhuǎn)的兩顆衛(wèi)星

上面的HTML文件中，為了繪制兩顆行星，頁(yè)面中定義了兩個(gè)div：一個(gè)類(lèi)名為planet1，另一個(gè)名為planet2。分別為兩個(gè)類(lèi)定義樣式規(guī)則，這兩個(gè)類(lèi)的樣式規(guī)則基本相同，復(fù)制后略作修改即可。

若在頁(yè)面中搞多個(gè)繞各自軌道旋轉(zhuǎn)的衛(wèi)星怎么辦呢？采用類(lèi)似的方法（定義類(lèi)名為planet3、planet4、…等層，再?gòu)?fù)制樣式規(guī)則略作修改）雖然可以實(shí)現(xiàn)，但重復(fù)代碼太多，導(dǎo)致HTML文件大小偏大。因此，采用自定義變量的方式更好些。

比較類(lèi).planet1和.planet2的樣式規(guī)則定義，可以為一個(gè)繞軌道旋轉(zhuǎn)的衛(wèi)星抽象出5個(gè)屬性：表示行星大小的--size、表示行星位置的--top和--left，表示衛(wèi)星旋轉(zhuǎn)速度的—speed、表示顏色的--color。

編寫(xiě)的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>

View Code

在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖4所示的動(dòng)畫(huà)效果。

圖4 繞各自軌道旋轉(zhuǎn)的七顆衛(wèi)星

通過(guò)這個(gè)例子，可以體會(huì)CSS中自定義變量的使用方法。

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開(kāi)APP，閱讀全文并永久保存查看更多類(lèi)似文章

css3 繪制蘋(píng)果圖標(biāo)

前端|創(chuàng)建簡(jiǎn)單動(dòng)態(tài)時(shí)鐘

前端css實(shí)現(xiàn)最基本的時(shí)間軸

基于HTML5的齒輪動(dòng)畫(huà)特效

【二次元的CSS】—— 用 DIV CSS3 畫(huà)咸蛋超人（詳解步驟）

CSS動(dòng)畫(huà)實(shí)例：升空的氣球

更多類(lèi)似文章 >>

中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频