效果图一

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; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
	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);
	   }
}