效果图：
截图效果不是很好，但是大概看的出来效果。
实现：
html:文章来源：https://www.toymoban.com/news/detail-738949.html
<view :class="next_flag?'btn btn_ani':'btn'" @click="next_flag=true">
下一个
</view>
//，next_flag默认为falsecss:文章来源地址https://www.toymoban.com/news/detail-738949.html
.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;
}
}到了这里，关于用css实现简单的点击按钮动态效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
