效果图:
截图效果不是很好,但是大概看的出来效果。
实现:
html:
<view :class="next_flag?'btn btn_ani':'btn'" @click="next_flag=true">
下一个
</view>
//,next_flag默认为false
css:
.btn{
width: 3.2rem;
height:.77rem;
border: .01rem solid white; //边框
border-radius: .64rem;//圆角
line-height: .8rem;//行高
text-align: center;
margin: .34rem 0;
}
//给需要的按钮添加上这个类就可以实现动画效果
.btn_ani{
animation: btn 1.1s infinite ease-in-out;
animation-iteration-count: 1;
}
//具体动画效果,可以自己按需调
@keyframes btn{
40%{
box-shadow:0px 0px 4px 5px #ffffff;
}
100%{
box-shadow:0px 0px 0px 0px #ffffff;
}
}