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文件内容如下。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图8所示的动画效果。
图8 小圆球一分为四(no-repeat)
若将上面样式定义中的“background-repeat:no-repeat;”去掉,此时背景图像将向垂直和水平方向重复,则呈现出如图9所示的动画效果。
图9 小圆球一分为四(repeat)
3.小圆球的海洋
理解了图8和图9的动画思想,我们继续。
为4个小圆球指定好初始位置,然后将各自的终止位置略作变化。编写如下的HTML文件。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
在浏览器中打开包含这段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文件如下。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图14所示的动画效果。
图14 满屏都是欢乐的小圆球