css涟漪光圈扩散_CSS3动画实现放⼤缩⼩、涟漪扩散效果、
叠加图⽚循环来回显⽰...
⼀、⽆限放⼤缩⼩，可以应⽤于跳动的⽓球等场景，效果如下
这⾥写图⽚描述
html部分
1
2
css部分
@keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0%{
transform: scale(1); /*开始为原始⼤⼩*/
}
25%{
transform: scale(1.1); /*放⼤1.1倍*/
}
50%{
transform: scale(1);
}
75%{
transform: scale(1.1);
}
}
.名字男
ballon{
width: 150px;
height: 200px;
background: url("images/balloon.png");
background-size: 150px 200px;
-webkit-animation-name: scaleDraw; /*关键帧名称*/
-webkit-animation-timing-function: ea-in-out; /*动画的速度曲线*/
-webkit-animation-iteration-count: infinite; /*动画播放的次数*/
-webkit-animation-duration: 5s; /*动画所花费的时间*/
}
1
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
后视点上⾯的⼏个属性也可以合在⼀起写
-webkit-animation: scaleDraw 5s ea-in-out infinite;
1
⼆、涟漪扩散, 效果图如下
欢喜是什么意思
这⾥写图⽚描述
实质就是就是利⽤了动画的延迟属性，两层圆的动画相关的属性基本相同，除了最外层的圆多设置了animation-delay属性html部分
1
5
6
css部分
.live{
position: relative;
老虎英语
width: 100px;
height: 100px;
}
.live img{
width: 100px;
height: 100px;
z-index: 0;
}
@keyframes living {
0%{
transform: scale(1);
opacity: 0.5;
}
50%{
transform: scale(1.5);
opacity: 0; /*圆形放⼤的同时，透明度逐渐减⼩为0*/ }
100%{
transform: scale(1);
opacity: 0.5;
}
}
.
live span{
position: absolute;
width: 100px;
height: 100px;
left: 0;
bottom: 0;直学士
background: #fff;
border-radius: 50%;
-webkit-animation: living 3s linear infinite;
z-index: -1;
}
.
live span:nth-child(2){
-webkit-animation-delay: 1.5s; /*第⼆个span动画延迟1.5秒*/ }
1
2
3
4
5
6
7
8
9
10
11
12哀哀
13
14
15
咸骨粥的制作方法16
17
18
19
20
21
22
23
24
25
26
27
28
29
赫连定
30
31
32
33
34
35
36
37
38
39
三、叠加图⽚循环来回显⽰，效果如下
这⾥写图⽚描述
思路：将第⼆张图⽚⽤绝对定位叠加在第⼀张图⽚上，通过在动画函数⾥设置透明度来控制图⽚的显⽰隐藏html部分
1
2
3
4
5
css部分
.pics{
position: relative;
width: 400px;
height: 400px;
}
.
pic1{
width: 400px;
