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

小样样样样样样 2021-09-22

展开全文

在页面中放置9个<div class=” circle”></div>，定义每个.circle的样式规则，使得9个圆在页面中显示为半径依次相差20px的同心圆。定义关键帧anim，使得9个圆各自按给定的延迟沿左下角到右上角的直线移动，形成圆与圆碰撞的效果，碰撞后改变移动方向，从而保证里面的小圆一定在其外面的大圆中移动，不会超出。

编写的HTML文件如下。

<!DOCTYPE html>

<html>

<head>

<title>圆与圆的碰撞</title>

<style>

.container

{

margin: 0 auto;

width: 450px;

height: 450px;

border: 3px solid DarkCyan;

border-radius: 5px;

position: relative;

}

.circle

{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border: 1px solid #008b8b;

border-radius: 50%;

animation: anim 2.75s ease-in-out infinite;

}

.one

{

width:380px;

height:380px;

animation-delay:2s;

}

.two

{

width:340px;

height:340px;

animation-delay:1.75s;

}

.three

{

width:300px;

height:300px;

animation-delay:1.5s;

}

.four

{

width:260px;

height:260px;

animation-delay:1.25s;

}

.five

{

width:220px;

height:220px;

animation-delay:1s;

}

.six

{

width:180px;

height:180px;

animation-delay:0.75s;

}

.seven

{

width:140px;

height:140px;

animation-delay:0.5s;

}

.eight

{

width:100px;

height:100px;

animation-delay:0.25s;

}

.nine

{

width:60px;

height:60px;

animation-delay:0s;

}

@keyframes anim

{

25%

{

left: calc(50% - 25px);

top: calc(50% + 25px);

border-color: green;

border-width: 3px;

}

75%

{

left: calc(50% + 25px);

top: calc(50% - 25px);

border-width: 1px;

}

</style>

</head>

<body>

</div>

</body>

</html>

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

图1 圆与圆的碰撞

上面文件中，表示9个同心圆的每个<div>指定了两个选择器，一个.circle用于定义圆的共同属性设置，另外一个选择器（one、two、…或nine）用于表示各自不同的属性设定。当然也可以只定义选择器circle，各自不同属性的设置用选择器: :nth-child()来设定。可改写上面的HTML文件如下，但本质上没多大不同。

<!DOCTYPE html>

<html>

<head>

<title>圆与圆的碰撞</title>

<style>

.container

{

margin: 0 auto;

width: 450px;

height: 450px;

border: 3px solid DarkCyan;

border-radius: 5px;

position: relative;

}

.circle

{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border: 1px solid #008b8b;

border-radius: 50%;

animation: anim 2.75s ease-in-out infinite;

}

.circle:nth-child(1)

{

width:380px;

height:380px;

animation-delay:2s;

}

.circle:nth-child(2)

{

width:340px;

height:340px;

animation-delay:1.75s;

}

.circle:nth-child(3)

{

width:300px;

height:300px;

animation-delay:1.5s;

}

.circle:nth-child(4)

{

width:260px;

height:260px;

animation-delay:1.25s;

}

.circle:nth-child(5)

{

width:220px;

height:220px;

animation-delay:1s;

}

.circle:nth-child(6)

{

width:180px;

height:180px;

animation-delay:0.75s;

}

.circle:nth-child(7)

{

width:140px;

height:140px;

animation-delay:0.5s;

}

.circle:nth-child(8)

{

width:100px;

height:100px;

animation-delay:0.25s;

}

.circle:nth-child(9)

{

width:60px;

height:60px;

animation-delay:0s;

}

@keyframes anim

{

25%

{

left: calc(50% - 25px);

top: calc(50% + 25px);

border-color: green;

border-width: 3px;

}

75%

{

left: calc(50% + 25px);

top: calc(50% - 25px);

border-width: 1px;

}

</style>

</head>

<body>

</div>

</body>

</html>

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

在上面给出的HTML文件中，我们会发现.circle:nth-child(1)~ .circle:nth-child(9)的样式规则定义中，都涉及width、height和animation-delay这3个属性，只是3个属性的属性值设定不同而已。虽然在编写文件时，采用简单的复制粘贴后略作修改即可。但文件的代码毕竟产生了冗余，导致文件大小变大。

能否将它们统一书写呢？采用CSS中的自定义变量可以实现这一要求。

自定义变量也称为自定义属性，在CSS3中采用“--*”的方式定义，其中“*”表示变量名称。例如，定义：--example-variable：20px; 是一个CSS声明，使用自定义“--*”属性将CSS变量--example-variable的值设置为20px。

定义了自定义变量后，在CSS3中可以采用函数var()引用这个自定义变量的值。

var() 函数用于插入自定义变量的值，其调用格式为：

var(custom-property-name, value)

其中，参数custom-property-name必需，表示自定义变量的名称，必需以 -- 开头。参数value可选，备用值，在自定义变量的值不存在的时候使用。

这样，在上面圆与圆碰撞的HTML文件中，我们可以将width、height和animation-delay这3个属性的设置用自定义变量的方式来完成。width和height的属性值取值相同，值为圆外接正方形的边长，可用自定义变量—length表示，animation-delay属性表示各个圆的动画执行延迟时间，可用自定义变量—delay表示。由此，改写上面的HTML文件如下。

<!DOCTYPE html>

<html>

<head>

<title>圆与圆的碰撞</title>

<style>

.container

{

margin: 0 auto;

width: 450px;

height: 450px;

border: 3px solid DarkCyan;

border-radius: 5px;