html背景向四周散开,纯css3圆形从中心向四周扩散动画

查看效果：

http://hovertree.com/texiao/css3/37/

以下为讲解和代码。

可以通过 @keyframes 规则，创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

其中

animationname必需。定义动画的名称。

keyframes-selector 必需。动画时长的百分比。

合法的值：

0-100%

from(与 0% 相同)

to(与 100% 相同)

css-styles必需。一个或多个合法的 CSS 样式属性。

例如：

@keyframes hovertreemove

{

from {top:30px;}

to {top:130px;}

}

效果：

http://hovertree.com/texiao/css3/37/1.htm

以下为上下运动的代码：

css3使用animation和@keyframes制作动画_何问起

@keyframes hovertreemove

{

from {top:30px;}

to {top:130px;}

}

#hovertreekf{

width:80px;height:80px;

border:1px solid red;

position:absolute;

background:url(http://hovertree.com/themes/hvtimages/smile.png) no-repeat center;

animation:hovertreemove /*动画样式名称*/

1s /*动画时间*/

linear /*线性运动*/

infinite /*无限播放*/

alternate/*往返动画*/;

}

a{color:blue;text-decoration:none;}

说明

以下为圆形扩散运动的代码：

纯css3圆形从中心向四周扩散动画效果_何问起

@keyframes warn {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.3;

}

75% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.5;

}

100% {

transform: scale(1);

-webkit-transform: scale(1);

opacity: 0.0;

}

}

@keyframes warn1 {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.3;

}

75% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.5;

}

100% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.0;

}

}

.container {

position: relative;

width: 40px;

height: 40px;

/*border: 1px solid #000; hovertree.com */

}

/* 保持大小不变的小圆圈 何问起 */

.dot {

position: absolute;

width: 92px;

height: 92px;

left: 120px;

top: 120px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border: 2px solid red;

border-radius: 50%;

z-index: 2;

}

/* 产生动画(向外扩散变大)的圆圈 */

.pulse {

position: absolute;

width: 320px;

height: 320px;

left: 2px;

top: 2px;

border: 6px solid red;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

-webkit-animation: warn 2s ease-out;

-moz-animation: warn 2s ease-out;

animation: warn 2s ease-out;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite;

box-shadow: 1px 1px 30px red;

}

.pulse1 {

position: absolute;

width: 320px;

height: 320px;

left: 2px;

top: 2px;

border: 6px solid red;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

-webkit-animation: warn1 2s ease-out;

-moz-animation: warn1 2s ease-out;

animation: warn1 2s ease-out;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite;

box-shadow: 1px 1px 30px red;

}a{color:blue;text-decoration:none;}

说明

参考：

http://hovertree.com/h/bjaf/pr_animation.htm

http://hovertree.com/h/bjaf/xpxgjfap.htm