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

小仙女本仙人 2021-09-24

展開全文

利用CSS可以構造出圖形，然后可以對構造的圖形添加動畫效果。下面我們通過旋轉的太極圖、放大的五角星、跳“雙人舞”的彎月等實例來體會純CSS實現(xiàn)動畫的方法。

1．旋轉的太極圖

設頁面中有<div class="shape"></div>，若為. shape設置樣式規(guī)則如下：

.shape

{

width: 192px;

height: 96px;

background: #fff;

border-color: #000;

border-style: solid;

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

border-radius: 50%;

}

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

圖1 上下兩個半圓

若將. Shape的樣式規(guī)則設置如下：

.shape

{

background: #000;

border: 36px solid #fff;

border-radius: 50%;

width: 24px;

height: 24px;

}

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

圖2 黑心圓

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

圖3 白心圓

將圖2和圖3適當?shù)胤湃雸D1中，則可以繪制出一個太極圖。

為這個太極圖定義關鍵幀，使得它旋轉起來。編寫的HTML文件內(nèi)容如下。

<!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文件，可以呈現(xiàn)出如圖4所示的動畫效果。

圖4 旋轉的太極圖

2．由小到大的五角星

設頁面中有<div class="shape"></div>，若為. shape設置樣式規(guī)則如下：

.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文件內(nèi)容如下。

<!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文件，可以呈現(xiàn)出如圖6所示的動畫效果。

圖6 放大的五角星

3．彎月在跳舞

設頁面中有<div class="shape"></div>，若為. shape設置樣式規(guī)則如下：

.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個點循環(huán)運動，可呈現(xiàn)出如圖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）

若將斜橢圓的填充色設置為背景色，只見到移動的白色陰影，則呈現(xiàn)出如圖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文件，可以呈現(xiàn)出如圖13所示的動畫效果，好像兩個彎月在跳“雙人舞”。

圖13 跳“雙人舞”的彎月

仿照上面的思想，我們還可以編寫如下的HTML文件，實現(xiàn)以原子為中心的電子旋轉的動畫效果。

<!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>