前言
本文主要给大家分享的是关于 利用 CSS3动画实现 圆 圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画（animation）、2D 转换（transform: scale）
css3中新增了一个animation的属性，该属性类似于创建一个animation对象
如：animation: bounce 2.0s infin IT e ease -i n-out;
animation有以下几个参数：
| animation | 所有动画属性的简写属性，除了 animation- play - stat e 属性。 | 3 |
| animation-n am e | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation -t iming-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时 开始 。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画 是否 在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play -s tate | 规定动画是否正在运行或 暂停 。默认是 "running"。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
CSS 3 中2D转换的实现用到两个属性：
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-ori gin | 指定变换的基点的位置。 | 3 |
静态效果图：
具体如代码所示：
<!DOCTY PE ht ML >
<html>
<head>
< ;m eta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@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;
}
}
.cont ai ner {
position: relative;
width: 40px;
h ei ght: 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;
}
</style>
</head>
<body>
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
</div>
</body>
</html>
总结
以上就是这篇 文章 的全部内容了，希望本文的内容对大家的学习 或者 工作具有一定的参考学习 价值 ，如果有疑问大家可以留言交流，谢谢大家对的支持。
总结
以上是 为你收集整理的 利用CSS3动画实现圆圈由小变大向外扩散的效果实例 全部内容，希望文章能够帮你解决 利用CSS3动画实现圆圈由小变大向外扩散的效果实例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did201596