html画布画出圆圈向外扩散,利用CSS3动画实现圆圈由小变大向外扩散的效果实例...

前言

本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画(animation)、2D 转换(transform: scale)

css3中新增了一个animation的属性，该属性类似于创建一个animation对象

如：animation: bounce 2.0s infinite ease-in-out;

animation有以下几个参数：

属性

描述

CSS

animation

所有动画属性的简写属性，除了 animation-play-state 属性。

3

animation-name

规定 @keyframes 动画的名称。

3

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

3

animation-timing-function

规定动画的速度曲线。默认是 "ease"。

3

animation-delay

规定动画何时开始。默认是 0。

3

animation-iteration-count

规定动画被播放的次数。默认是 1。

3

animation-direction

规定动画是否在下一周期逆向地播放。默认是 "normal"。

3

animation-play-state

规定动画是否正在运行或暂停。默认是 "running"。

3

animation-fill-mode

规定对象动画时间之外的状态。

3

CSS 3 中2D转换的实现用到两个属性：

属性

描述

CSS

transform

向元素应用 2D 或 3D 转换。

3

transform-origin

指定变换的基点的位置。

3

静态效果图：

具体如代码所示：

无标题文档

@keyframes warn {

0% {

transform: scale(0);

opacity: 0.0;

}

25% {

transform: scale(0);

opacity: 0.1;

}

50% {

transform: scale(0.1);

opacity: 0.3;

}

75% {

transform: scale(0.5);

opacity: 0.5;

}

100% {

transform: scale(1);

opacity: 0.0;

}

}

@-webkit-keyframes "warn" {

0% {

-webkit-transform: scale(0);

opacity: 0.0;

}

25% {

-webkit-transform: scale(0);

opacity: 0.1;

}

50% {

-webkit-transform: scale(0.1);

opacity: 0.3;

}

75% {

-webkit-transform: scale(0.5);

opacity: 0.5;

}

100% {

-webkit-transform: scale(1);

opacity: 0.0;

}

}

.container {

position: relative;

width: 40px;

height: 40px;

border: 1px solid #000;

}

/* 保持大小不变的小圆圈 */

.dot {

position: absolute;

width: 6px;

height: 6px;

left: 15px;

top: 15px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border: 2px solid red;

border-radius: 20px;

z-index: 2;

}

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

.pulse {

position: absolute;

width: 24px;

height: 24px;

left: 2px;

top: 2px;

border: 6px solid red;

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

border-radius: 30px;

z-index: 1;

opacity: 0;

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

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

animation: warn 3s ease-out;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite;

}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。