CSS动画实例：移动的眼珠子

适当地利用CSS的box-shadow可以构造图形，然后可以对构造的图形添加动画效果。下面我们通过移动的眼珠子、圆珠一二三、一分为四、四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使用方法。

box-shadow属性的基本格式为：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，属性值h-shadow为必需，表示水平阴影的位置，它允许负值；v-shadow也为必需，表示垂直阴影的位置，也允许负值：blur可选，表示模糊距离；spread可选，给定阴影的尺寸；color可选，表示阴影的颜色；inset 可选，表示将外部阴影 (outset) 改为内部阴影。

1．移动的眼珠子

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

.shape

{

width: 96px;

height: 64px;

border-radius: 50%;

background:#FFFAFA;

box-shadow: -105px 0 0 0px #FFFAFA;

position: relative;

margin-left:105px;

}

可在页面中显示如图1所示的图形，这两个椭圆中前面的一个是由box-shadow属性设置的。

图1 两个椭圆

再定义样式. Shape：after如下：

.shape:after

{

content: "";

width: 0;

height: 0;

border-radius: 50%;

left: 35%;

top: 30%;

position: absolute;

border:12px solid #000;

box-shadow: -102px 0 0 0 #000;

}

为表示眼珠的椭圆中加上两个黑点，可在页面中显示如图2所示的图形。

图2 两颗眼珠子

为眼珠子中的黑点定义关键帧，使得它移动起来。编写的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: 96px;

    height: 64px;

    border-radius: 50%;

    background:#FFFAFA;

    box-shadow: -105px 0 0 0px #FFFAFA;

    position: relative;

    margin-left:105px;

  }

  .shape:after

  {

    content: "";

    width: 0;

    height: 0;

    border-radius: 50%;

    left: 35%;

    top: 30%;

    position: absolute;

    border:12px solid #000;

    box-shadow: -102px 0 0 0 #000;

    animation: move 0.8s linear infinite alternate;

  }

  @keyframes move

  {

    0%   { left: 0; }

    100% { left: 55px; }

  }

</style>

</head>

<body>

<div  class="container">

    <div class="shape"></div>

</div>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图3所示的动画效果。

图3 移动的眼珠子（双眼）

为实现眼珠子移动动画效果，还可以编写如下的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;

    animation: 2s anim1 infinite;

  }

  .shape:before

  {

    content: '';

    display: block;

    overflow:hidden;

    width: 120px;

    height: 120px;

    border-radius: 80% 20%;

    background:#fff;

    border: 3px solid currentcolor;

    border-width: 3px 1.5px 1.5px 3px;

    transform: rotate(45deg);

  }

  .shape:after

  {

    content: '';

    display: block;

    width:30px;

    height: 30px;

    position: absolute;

    background: #000;

    top: 40px;

    left: 60%;

    border-radius: 50%;

    box-shadow: -4px 4px 0 10px #191970;

    animation: 2s anim2 linear infinite;

  }

  @keyframes anim1

  {

    0%, 30%, 100% { transform: scaleY(1); }

    10%     { transform: scaleY(0); }

  }

  @keyframes anim2

  {

    0%, 100% { left:60%; }

    30%      { left:10%; }

    50%      { left:80%;  }

  }

</style>

</head>

<body>

<div  class="container">

    <div class="shape"></div>

</div>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图4所示的动画效果。

图4 移动的眼珠子（单眼）

2．圆珠一二三

实现这样一个动画效果：一个大圆环每翻动一次，里面增加一颗珠子，最多可增加到三颗。编写如下的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: 160px;

    height: 160px;

    border: 8px solid #f0f;

    border-radius: 50%;

    animation: anim1 1.25s infinite -0.3s;

  }

  .shape:after

  {

    content: '';

    position: absolute;

    top:0;

    left:0;

    right:0;

    bottom:0;

    margin:auto;

    width: 0;

    height: 0;

    border: 20px solid #f00;

    border-radius: 50%;

    transform: translate(-40px);

    animation: anim2 5s infinite steps(1);

  }

  @keyframes anim1

  {

     0%   { transform: rotateX(0deg); }

     100% { transform: rotateX(180deg); }

  }

  @keyframes anim2

  {

     0%   { opacity: 0; }

     25%  { opacity: 1; }

     50%  { box-shadow: 40px 0 0 #0f0; }

     75%  { box-shadow: 40px 0 0 #0f0, 80px 0 0 #00f; }

  }

</style>

</head>

<body>

<div  class="container">

    <div class="shape"></div>

</div>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图5所示的动画效果。

图5 圆珠一二三

3．一分为四

将一个圆球向上下左右四个方向生成四个同样的圆球，四个圆球采用box-shadow属性设置。编写如下的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: 30px;

    height: 30px;

    background: #f0f;

    border-radius: 50%;

    animation: anim 2s  linear infinite;

  }

  @keyframes anim

  {

     0%   { opacity: 0; }

     15%  { opacity: 1; }

     25%   { background:#d8d8d8; }

     100%

     {

          background:#d8d8d8;

           box-shadow: -80px 0 0 #f0f, 80px 0 0 #f0f,0 80px 0 0 #f0f,0 -80px 0 0 #f0f;

      }

  }

</style>

</head>

<body>

<div  class="container">

    <div class="shape"></div>

</div>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图6所示的动画效果。

图6 圆球一分为四

若修改关键帧定义为：

@keyframes anim

{

0%,100% { box-shadow: 0 0 0 #f0f; }

25% { box-shadow: -80px 0 0 #f0f, 80px 0 0 #f0f; }

50% { box-shadow: 0 0 0 #f0f; }

75% { box-shadow: 0 80px 0 0 #f0f,0 -80px 0 0 #f0f; }

}

则呈现出如图7所示的动画效果。

图7 圆球一分为二

4．四个小圆旋转扩散

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

.shape

{

position: relative;

width: 30px;

height: 30px;

border-radius: 50%;

box-shadow: -30px -30px 0 #f0f, 30px -30px 0 #f0f,

30px 30px 0 #f0f,-30px 30px 0 #f0f;

}

可在页面中显示如图8所示的图形，这4个小圆均是由box-shadow属性设置的。

图8 四个小圆

若将图8的四个小圆作为初始帧，用

box-shadow: 60px -60px 0 #f0f,60px 60px 0 #f0f,-60px 60px 0 #f0f,-60px -60px 0 #f0f;

设置的另外4个圆作为终止帧，它和初始帧相比，四个小圆的大小不变，但位置发生了变化，这个变化产生的效果是小圆会旋转扩散。

编写的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: 30px;

    height: 30px;

    border-radius: 50%;

    animation: anim 1s  linear infinite;

  }

  @keyframes anim

  {

     0%   { box-shadow: -30px -30px 0 #f0f, 30px -30px 0 #f0f,30px 30px  0 #f0f,-30px 30px 0 #f0f;  }

     100%

     {

        box-shadow: 60px -60px 0 #f0f,60px 60px 0 #f0f,-60px 60px 0 #f0f,-60px -60px 0 #f0f;    }

  }

</style>

</head>

<body>

<div  class="container">

    <div class="shape"></div>

</div>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图9所示的动画效果。

图9 四小圆旋转扩散