利⽤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
静态效果图：
具体如代码所⽰：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>⽆标题⽂档</title>
<style>
@keyframes warn {
0% {
html animation属性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;
}
</style>
</head>
<body>
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
</div>
</body>
</html>
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。