效果圖：
截圖效果不是很好，但是大概看的出來效果。
實(shí)現(xiàn)：
html:文章來源：http://www.zghlxwxcb.cn/news/detail-738949.html
<view :class="next_flag?'btn btn_ani':'btn'" @click="next_flag=true">
下一個(gè)
</view>
//，next_flag默認(rèn)為falsecss:文章來源地址http://www.zghlxwxcb.cn/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;
}
? ? //給需要的按鈕添加上這個(gè)類就可以實(shí)現(xiàn)動(dòng)畫效果
.btn_ani{
animation: btn 1.1s infinite ease-in-out;
animation-iteration-count: 1;
}
? ? //具體動(dòng)畫效果，可以自己按需調(diào)
? ? @keyframes btn{
? ? 40%{
? ? box-shadow:0px 0px 4px 5px #ffffff;
? ? }
? ? 100%{
? ? box-shadow:0px 0px 0px 0px #ffffff;
? ? }
? ? }到了這里，關(guān)于用css實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)擊按鈕動(dòng)態(tài)效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
