首页 前端知识 用css实现简单的点击按钮动态效果

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

2024-05-23 20:05:13 前端知识 前端哥 401 869 我要收藏

效果图:

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

实现:

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;
            }
        }
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9141.html
标签
评论
发布的文章

jQuery初学

2024-05-29 10:05:14

Jquery中$,web开发语言

2024-05-29 10:05:25

jQuery 实现小球撞击动画

2024-05-29 10:05:04

echarts 横向柱状图

2024-05-29 10:05:01

Echarts:读取动态数据

2024-05-29 10:05:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!