CSS动画实例：小圆球的海洋
CSS背景属性用于定义HTML元素的背景，在CSS提供的背景属性中，
background-image：指定要使用的一个或多个背景图像；
background-color：指定要使用的背景颜色；
background-position：指定背景图像的位置；
background-size：指定背景图片的大小；
background-repeat：指定如何重复背景图像；
background-origin 指定背景图像的定位区域；
background-clip 指定背景图像的绘画区域；
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
下面我们以“小圆球的海洋”作为实例来体会背景动画的设计方法。
1．CSS3 径向渐变
在CSS3中，可以使用radial-gradient() 函数以径向渐变的方式创建背景“图像”。径向渐变由它的中心定义。其调用格式为：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
各参数说明如下：
shape确定渐变的类型，属性值ellipse（默认）指定椭圆形的径向渐变，circle指定圆形的径向渐变。
size 定义渐变的大小，可取属性值有：
farthest-corner（默认）：指定径向渐变的半径长度为从圆心到离圆心最远的角；
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边。
position 定义渐变的位置。可取属性值有：
center（默认）：设置中间为径向渐变圆心的纵坐标值；
top：设置顶部为径向渐变圆心的纵坐标值；
bottom：设置底部为径向渐变圆心的纵坐标值。
start-color，…，last-color用于指定渐变的起止颜色，可以使用长度值或百分比来指定起止色位置，但不允许负值。
设页面中有<div class="shape"></div>，定义.shape的样式规则如下：
.shape
{
width:200px;
height:150px;
background-image: radial-gradient(red, green, blue);
}
可在页面中显示如图1所示的径向渐变图案。在这个径向渐变中颜色结点分布均匀。
图1 径向渐变图（颜色结点分布均匀）
若改写为：background-image: radial-gradient(red 5%, green 15%, blue 60%);，则显示的图案如图2所示。
图2 径向渐变图（颜色结点分布不均匀）
若改写为：background-image: radial-gradient(closest-side at 60% 50%, red, green, blue);，则显示如图3所示的图案。
图3 径向渐变图
若改写为：background-image: radial-gradient(circle, red, green, blue);，则显示如图4所示的图案。
图4 圆形径向渐变图
若修改.shape的样式定义为：
.shape
{
width:200px;
height:200px;
border-radius:50%;
background-image: radial-gradient(circle, red,yellow,blue);
}
可在页面中显示如图5所示的圆形。
图5 圆形
2．小圆球一分为四
设页面中有<div class="ocean"></div>，为.ocean定义样式规则如下：
.ocean
{
margin: 0 auto;
width:450px;
height: 450px;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
background-image: radial-gradient(circle at center, #f5f6fa 10px, transparent 0),
radial-gradient(circle at center, #f5f6fa 10px, transparent 0),
radial-gradient(circle at center, #f5f6fa 10px, transparent 0),
radial-gradient(circle at center, #f5f6fa 10px, transparent 0);
background-size: 90px 90px;
background-color: #0652dd;
background-repeat:no-repeat;
}
则页面中的显示如图6所示。background-image后定义了四个径向渐变图像，由于没有给它们指定位置，会叠放在一起，因而显示为一个小圆球。小圆球的圆心坐标为（45px,45px）。
图6 一个白色小圆球
为这四个小圆球指定位置，在.ocean样式定义中加上如下属性设置：
background-position: calc(50% + 0px) calc(50% + 0px),
calc(50% + 0px) calc(50% + 90px),
calc(50% + 90px) calc(50% + 0px),
calc(50% + 90px) calc(50% + 90px);
则页面中的显示如图7所示。
图7 4个小圆球
为从图6至图7的变化定义关键帧，使小球由一分成四，编写的HTML文件内容如下。
<!DOCTYPE html>
<html>
<head>
<title>小圆球一分为四</title>
<style>
.ocean
{
margin: 0 auto;
width:450px;
height: 450px;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
background-image: radial-gradient(circle at center, #f5f6fa 10px, transparent 0),
radial-gradient(circle at center, #f5f6fa 10px, transparent 0),
radial-gradient(circle at center, #f5f6fa 10px, transparent 0),
radial-gradient(circle at center, #f5f6fa 10px, transparent 0);
background-size: 90px 90px;
background-color: #0652dd;
animation: anim 2s infinite linear;
background-repeat:no-repeat;
}
@keyframes anim
{
to
{
background-position: calc(50% + 0px) calc(50% + 0px),
calc(50% + 0px) calc(50% + 90px),
calc(50% + 90px) calc(50% + 0px),
calc(50% + 90px) calc(50% + 90px);
}
}
</style>
</head>
<body>
<div class="ocean"></div>
</body>
</html>
View Code
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图8所示的动画效果。
图8 小圆球一分为四（no-repeat）
若将上面样式定义中的“background-repeat:no-repeat;”去掉，此时背景图像将向垂直和水平方向重复，则呈现出如图9所示的动画效果。
图9 小圆球一分为四（repeat）
3．小圆球的海洋
理解了图8和图9的动画思想，我们继续。
为4个小圆球指定好初始位置，然后将各自的终止位置略作变化。编写如下的HTML文件。
<!DOCTYPE html>
<html>
<head>
<title>小圆球的海洋</title>
<style>
.ocean
{
margin: 0 auto;
width:450px;
height: 450px;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
background-image: radial-gradient(circle at center, #f5f6fa 10px, transparent 0),
radial-gradient(circle at center, #f5f6fa 10px, transparent 0),
radial-gradient(circle at center, #f5f6fa 10px, transparent 0),
radial-gradient(circle at center, #f5f6fa 10px, transparent 0);
background-position: calc(50% + 0px) calc(50% + 0px),
calc(50% + 0px) calc(50% + 90px),
calc(50% + 90px) calc(50% + 90px),
calc(50% + 90px) calc(50% + 0px);
background-size: 90px 90px;
background-color: #0652dd;
animation: anim 2s infinite linear;
background-repeat:no-repeat;
}
@keyframes anim
{
to
{
background-position:calc(50% + 90px) calc(50% + 0px),
calc(50% + 0px) calc(50% + 0px),
calc(50% + 0px) calc(50% + 90px),
calc(50% + 90px) calc(50% + 90px);
}
}
</style>
</head>
<body>
<div class="ocean"></div>
</body>
</html>
View Code
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图10所示的动画效果。
图10 旋转的4个小圆球
同样将样式定义中的“background-repeat:no-repeat;”去掉，此时背景图像将向垂直和水平方向重复，则呈现出如图11所示的动画效果。
图11 小圆球的海洋（1）
若在图11的基础上，在关键帧to中加上一句“background-size: 180px 180px;”，使得关键结束帧的背景大小扩大1倍，则呈现出如图12所示的动画效果。
图12 小圆球的海洋（2）
在关键帧to中加上的一句为“background-size: 45px 45px;”，使得关键结束帧的背景大小缩小1倍，且将radial-gradient四个函数中的10px均修改为8px，使得小圆球也适当变小，则呈现出如图13所示的动画效果。
图13 小圆球的海洋（3）
将整个屏幕作为背景，显示欢乐的小圆球，编写的HTML文件如下。
<!DOCTYPE html>
<html>
<head>
<title>满屏都是小圆球</title>
<style>
body
{
min-height: 100vh;
background-image: radial-gradient(circle at center, #f5f6fa 1vmin, transparent 0),
radial-gradient(circle at center, #f5f6fa 1vmin, transparent 0),
radial-gradient(circle at center, #f5f6fa 1vmin, transparent 0),
radial-gradient(circle at center, #f5f6fa 1vmin, transparent 0);
background-position: calc(50% + 0vmin) calc(50% + 0vmin),
calc(50% + 0vmin) calc(50% + 15vmin),
calc(50% + 15vmin) calc(50% + 15vmin),
calc(50% + 15vmin) calc(50% + 0vmin);
background-size: 15vmin 15vmin;
animation: anim 2s infinite linear;
background-color: #0652dd;
}
@keyframes anim
{
to
{
background-size: 30vmin 30vmin;
background-position: calc(50% + 15vmin) calc(50% + 0vmin),
calc(50% + 0vmin) calc(50% + 0vmin),
calc(50% + 0vmin) calc(50% + 15vmin),
calc(50% + 15vmin) calc(50% + 15vmin);
}
}
</style>
</head>
<body>
</body>
</html>
View Code
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图14所示的动画效果。
图14 满屏都是欢乐的小圆球