前言
本文主要给大家分享的是关于利用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; }
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对考高分网的支持。
