CSS動畫實例：太極圖在旋轉

時間  2020-08-20
標籤 css 動畫 實例 太極圖 旋轉 欄目 CSS 简体版
原文   原文鏈接

      利用CSS能夠構造出圖形，而後能夠對構造的圖形添加動畫效果。下面咱們經過旋轉的太極圖、放大的五角星、跳「雙人舞」的彎月等實例來體會純CSS實現動畫的方法。html

1．旋轉的太極圖

      設頁面中有<div class="shape"></div>，若爲. shape設置樣式規則以下：瀏覽器

  .shapeide

  {flex

    width: 192px;動畫

    height: 96px;spa

    background: #fff;3d

    border-color: #000;code

    border-style: solid;orm

    border-width: 4px 4px 100px 4px;htm

    border-radius: 50%;

  }

可在頁面中顯示如圖1所示的圖形。

圖1  上下兩個半圓

      若將. Shape的樣式規則設置以下：

  .shape

  {

    background: #000;

    border: 36px solid #fff;

    border-radius: 50%;

    width: 24px;

    height: 24px;

  }

則可在頁面中顯示如圖2所示的圖形。

 

圖2  黑心圓

      如將黑心圓的背景填充色和邊框填充色交換一下，則可在頁面中顯示如圖3所示的圖形。

圖3  白心圓

      將圖2和圖3適當地放入圖1中，則能夠繪製出一個太極圖。

      爲這個太極圖定義關鍵幀，使得它旋轉起來。編寫的HTML文件內容以下。

<!DOCTYPE html>
<html>
<head>
<title>旋轉的太極圖</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .shape
  {
    width: 192px;
    height: 96px;
    background: #fff;
    border-color: #000;
    border-style: solid;
    border-width: 4px 4px 100px 4px;
    border-radius: 50%;
    position: relative;
    animation:rotate 2s linear infinite;
  }
  .shape:before
  {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #fff;
    border: 36px solid #000;
    border-radius: 50%;
    width: 24px;
    height: 24px;
  }
  .shape:after 
  {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000;
    border: 36px solid #fff;
    border-radius:50%;
    width: 24px;
    height: 24px;
   } 
   @keyframes rotate
   {
      0%   { transform: rotate(0deg); }
      100% { transform:rotate(360deg); }
   }
</style>
</head>
<body>
<div  class="container">
    <div class="shape"></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖4所示的動畫效果。

 

圖4  旋轉的太極圖

2．由小到大的五角星

      設頁面中有<div class="shape"></div>，若爲. shape設置樣式規則以下：

  .shape

  {

    position: relative;

    display: block;

    width:0px;

    height:0px;

    border-left:  100px solid transparent;

    border-right: 100px solid transparent;

    border-bottom:70px  solid red;

    transform:rotate(35deg);

  }

  .shape:before

  {  

    content: '';

    position: absolute;

    width: 0px;  

    height: 0px;

    top: -45px;

    left: -62.5px;

    border-left:   30px solid transparent;

    border-right:  30px solid transparent;

    border-bottom: 80px solid green;

    transform: rotate(-35deg);

  }

  .shape:after

  {  

    content: '';

    position: absolute;

    width: 0px;

    height: 0px;

    top: 3px;

    left: -105px;

    border-left: 100px solid transparent;

    border-right: 100px solid transparent;

    border-bottom: 70px solid blue;

    transform:rotate(-70deg);

  }

      可在頁面中顯示如圖5所示的五角星。這個五角星是由三個三角形拼成的，爲了方便理解，將三個三角形設置成不一樣的顏色。

 

圖5  由三個三角形拼成的五角星

      將三個三角形的顏色都設置成紅色，獲得一個紅色五角星，併爲這個五角星定義關鍵幀，使得它由小慢慢放大。編寫的HTML文件內容以下。

<!DOCTYPE html>
<html>
<head>
<title>放大的五角星</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .shape
  {
    position: relative;
    display: block;
    width:0px;
    height:0px;
    border-left:  100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom:70px  solid red;
    transform:rotate(35deg);
    animation:anim 2s linear infinite;
  }
  .shape:before 
  {   
    content: '';
    position: absolute;
    width: 0px;   
    height: 0px;
    top: -45px;
    left: -62.5px;
    border-left:   30px solid transparent;
    border-right:  30px solid transparent;
    border-bottom: 80px solid red;
    transform: rotate(-35deg);
  }
  .shape:after
  {   
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    top: 3px;
    left: -105px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    transform:rotate(-70deg);
  }
  @keyframes anim
  {
     0%   { transform:  rotate(35deg) scale(0.2);  opacity: 0.1; }
     80%,100% { transform:  rotate(35deg) scale(1.2);  opacity: 1;  }
  }
</style>
</head>
<body>
<div  class="container">
    <div class="shape"></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖6所示的動畫效果。

 

圖6  放大的五角星

3．彎月在跳舞

      設頁面中有<div class="shape"></div>，若爲. shape設置樣式規則以下：

  .shape

  {

    display: block;

    width: 160px;

    height: 160px;

    background:#ff0000;

    border-radius: 50%;

    transform: rotateZ(45deg)  rotateX(70deg);

  }

可在頁面中顯示如圖7所示的圖形。

 

圖7  紅色斜橢圓

      若在.shape樣式定義中加上一句：box-shadow: 32px 0px 0 0px #ffffff;，則在頁面中顯示如圖8所示的圖形，紅色斜橢圓帶白色陰影。

圖8   帶白色陰影的紅色斜橢圓（1）

      若再將rotateX(70deg)修改成rotateY(70deg)，則在頁面中顯示如圖9所示的圖形。

圖9  帶白色陰影的紅色斜橢圓（2）

      若定義以下的關鍵幀，讓紅色橢圓帶的白色陰影在給定的8個點循環運動，可呈現出如圖10所示的動畫效果。

  @keyframes spin

  {

    0%,100%  { box-shadow: 32px 0px 0 0px #ffffff; }

    12%      { box-shadow: 32px 32px 0 0 #ffffff;  }

    25%      { box-shadow: 0 32px 0 0px #ffffff;   }

    37%      { box-shadow: -32px 32px 0 0 #ffffff; }

    50%      { box-shadow: -32px 0 0 0 #ffffff;    }

    62%      { box-shadow: -32px -32px 0 0 #ffffff;}

    75%      { box-shadow: 0px -32px 0 0 #ffffff;  }

    87%      { box-shadow: 32px -32px 0 0 #ffffff; }

  }

 

圖10  白色陰影運動效果（1）

      若將斜橢圓的填充色設置爲背景色，只見到移動的白色陰影，則呈現出如圖11所示的動畫效果。

 

圖11  白色陰影運動效果（2）

      圖9對應的白色陰影運動效果如圖12所示。

 

圖12  白色陰影運動效果（3）

       將圖11和圖12中運動的兩個白色陰影組合起來，編寫以下的HTML文件。

<!DOCTYPE html>
<html>
<head>
<title>跳舞的彎月</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .shape 
  {
    width: 160px;
    height: 160px;
    border-radius: 50%; 
    transform: rotateZ(45deg); 
  }
  .shape:before, .shape:after 
  {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    animation: 1s spin linear infinite;
  }
  .shape:before 
  {
    transform: rotateX(70deg);
  }
  .shape:after 
  {
    transform: rotateY(70deg);
    animation-delay: 0.5s;
  }
  @keyframes spin 
  {
    0%,100%  { box-shadow: 32px 0px 0 0px #ffffff; }
    12%      { box-shadow: 32px 32px 0 0 #ffffff;  }
    25%      { box-shadow: 0 32px 0 0px #ffffff;   }
    37%      { box-shadow: -32px 32px 0 0 #ffffff; }
    50%      { box-shadow: -32px 0 0 0 #ffffff;    }
    62%      { box-shadow: -32px -32px 0 0 #ffffff;}
    75%      { box-shadow: 0px -32px 0 0 #ffffff;  }
    87%      { box-shadow: 32px -32px 0 0 #ffffff; }
  }
</style>
</head>
<body>
<div  class="container">
    <div class="shape"></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖13所示的動畫效果，好像兩個彎月在跳「雙人舞」。

 

圖13  跳「雙人舞」的彎月

      仿照上面的思想，咱們還能夠編寫以下的HTML文件，實現以原子爲中心的電子旋轉的動畫效果。

<!DOCTYPE html>
<html>
<head>
<title>旋轉的電子</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .shape 
  {
    position: relative;
    width: 24px;
    height: 24px;
    background-color: #f00;
    border-radius: 50%;
    animation: anim1 20s infinite linear;
  }
  .shape:before, .shape:after 
  {
    content: '';
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .shape:before 
  {
    width: 60px;
    height: 200px;
    animation: anim2 .8s linear infinite;
  }
  .shape:after 
  {
    width: 200px;
    height: 60px;
    animation: anim2 1.2s linear infinite;
  }
  @keyframes anim1 
  {
     0%   { transform: rotate(0deg);   }
     100% { transform: rotate(360deg); }
  }
  @keyframes anim2 
  {
     0%, 100%  { box-shadow: 2px -2px 0 1.5px #fff; }
     25%       { box-shadow: 2px 2px 0 1.5px #fff;  }
     50%       { box-shadow: -2px 2px 0 1.5px #fff; }
     75%       { box-shadow: -2px -2px 0 1.5px #fff;}
  }
</style>
</head>
<body>
<div  class="container">
    <div class="shape"></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖14所示的動畫效果，好像兩個電子繞中心原子在各自軌道旋轉。

 

圖14  繞中心原子旋轉的電子

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程