CSS动画实例（小圆球的海洋） 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用于指定渐变的起止颜色，可以使用长度值或百分比来指定起止色位置，但不允许负值。
设页面中有，定义.shape的样式规则如下：
.shape
{
width:200px;
【CSS动画实例（小圆球的海洋）】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．小圆球一分为四
设页面中有，为.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所示。

文章图片

图74个小圆球
为从图6至图7的变化定义关键帧，使小球由一分成四，编写的HTML文件内容如下。

文章图片

文章图片