CSS动画实例：太极图在旋转

    利用CSS可以构造出图形，然后可以对构造的图形添加动画效果。下面我们通过旋转的太极图、放大的五角星、跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法。

1．旋转的太极图

      设页面中有<div class="shape"></div>，若为. shape设置样式规则如下：

  .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的样式规则设置如下：

  .shape

  {

    background: #000;

    border: 36px solid #fff;

    border-radius: 50%;

    width: 24px;

    height: 24px;

  }

则可在页面中显示如图2所示的图形。

 

图2  黑心圆

      如将黑心圆的背景填充色和边框填充色交换一下，则可在页面中显示如图3所示的图形。

图3  白心圆

      将图2和图3适当地放入图1中，则可以绘制出一个太极图。

      为这个太极图定义关键帧，使得它旋转起来。编写的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文件内容如下。

 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文件。

 View Code

      在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图13所示的动画效果，好像两个弯月在跳“双人舞”。

 

图13  跳“双人舞”的弯月

      仿照上面的思想，我们还可以编写如下的HTML文件，实现以原子为中心的电子旋转的动画效果。

 View Code

      在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图14所示的动画效果，好像两个电子绕中心原子在各自轨道旋转。

 

图14  绕中心原子旋转的电子