用css实现简单的点击按钮动态效果

效果图：

截图效果不是很好，但是大概看的出来效果。

实现：

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;
            }
        }