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文件内容如下。

<!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  绕中心原子旋转的电子

赞 (0)

相关推荐

  • CSS动画实例：旋转的叶片

    在页面中放置一个类名为container的层作为容器,在该层中再定义一个名为shape的子层,HTML代码描述如下: <div class="container"> & ...

  • CSS动画实例：旋转的圆角正方形

    在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...

  • CSS动画实例：涡旋

    设页面中有<div class=" vortex "></div>,若定义. vortex的样式规则和关键帧如下: .vortex { position: ...

  • CSS动画实例：圆与圆的碰撞

    在页面中放置9个<div class=" circle"></div>,定义每个.circle的样式规则,使得9个圆在页面中显示为半径依次相差20px的同心 ...

  • CSS动画实例：SierPinski地毯

    设页面中有<div class="shape"></div>,若定义.shape的样式规则为: .shape { width: 100px; height: ...

  • CSS动画实例：行星和卫星

    设页面中有<div class=" planet "></div>,用来绘制一个行星和卫星图形.这个图形包括三部分:行星.卫星和卫星旋转的轨道.定义. pl ...

  • CSS动画实例：小圆球的海洋

    CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: ba ...

  • CSS动画实例：升空的气球

    CSS动画实例：升空的气球

  • CSS动画实例：Loading加载动画效果（三）

    3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...