示例1：
|
1 |
<div class="ballon"></div>
|
|
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 |
@keyframes scaleDraw {
0%{
transform: scale(1);
}
25%{
transform: scale(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: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
}
|
上面的幾個屬性也可以合在一起寫
|
1
2 |
animation: scaleDraw 5s ease-in-out infinite;
-webkit-animation: scaleDraw 5s ease-in-out infinite;
|
效果：
實例2：
|
1
2
3
4
5 |
<div class="live">
<img src="images/live.png" alt="">
<span></span>
<span></span>
</div>
|
|
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 |
.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秒*/
}
|
實質就是就是利用了動畫的延遲屬性，兩層圓的動畫相關的屬性基本相同，除了最外層的圓多設置了animation-delay屬性
18330686660
點擊咨詢
18330686660 