效果图一

1
<div class="bottomBarTrans"> 立即报名领取创业资料</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
39
40
41
42
43
44
.bottomBarTrans {
background: #f8f8f8;
padding: 0 24px;
width: 100%;
box-sizing: border-box;
background-color: #bfa;
text-align: center;
font-weight:bold;
font-size:16px;
margin:15px 0;
padding: 15px;
border-radius: 40px;
-webkit-animation-name: scaleDraw; /*动画名称*/
-webkit-animation-timing-function: ease-in-out; /*动画执行方式,linear:匀速;ease:先慢再快后慢;ease-in:由慢速开始;ease-out:由慢速结束;ease-in-out:由慢速开始和结束;*/
-webkit-animation-iteration-count: infinite; /*动画播放次数,infinite:一直播放*/
-webkit-animation-duration: 3.2s; /*动画完成时间*/
}

@keyframes scaleDraw {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}

9.4% {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}

18.8% {
-webkit-transform: scale(1);
transform: scale(1);
}

28.2% {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}

37.6% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

效果图二

1
<image class="anima" mode="widthFix" @click="nav" src="@/static/1_btn.png"></image>
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

.anima {
animation-name: likes; // 动画名称
animation-direction: alternate; // 动画在奇数次(135...)正向播放,在偶数次(246...)反向播放。
animation-timing-function: linear; // 动画执行方式,linear:匀速;ease:先慢再快后慢;ease-in:由慢速开始;ease-out:由慢速结束;ease-in-out:由慢速开始和结束;
animation-delay: 0s; // 动画延迟时间
animation-iteration-count: infinite; // 动画播放次数,infinite:一直播放
animation-duration: 1s; // 动画完成时间
}

@keyframes likes {
0%{
transform: scale(1);
}
25%{
transform: scale(0.9);
}
50%{
transform: scale(0.85);
}
75%{
transform: scale(0.9);
}
100%{
transform: scale(1);
}
}