移动端模拟hover：按钮点击变色之后还原

余学文发布于2019-08-01 16:10 / 397人阅读

摘要：移动端按钮点击变色之后还原按钮按钮方法三网友的力量是强大，后来从网上找到了一个列表页的，升级版。移动端模拟自定义按钮点击效果遍历子类查看有没有子类触发过动作如果子类已经触发了动作，父类则取消触发操作

需求：点击按钮希望像在PC端那样有个类似于hover的效果，触摸按钮变色，手指离开变回原来的颜色；

方法一：CSS3+JS

用keyframes动画，js点击按钮时添加keyframes动画，定时器移除keyframes动画




    
    
    移动端按钮点击变色之后还原
    
    



按钮按钮

方法二：JS

用touchstart，touchend来进行样式的添加和移除。




    
    
    移动端按钮点击变色之后还原
    
    



按钮按钮

方法三：JS

网友的力量是强大，后来从网上找到了一个列表页的demo，升级版。




    
    
    移动端模拟hover
    



    
        item1
        item2
        item3
        item4
        item5

GPU云服务器云服务器按钮点击变色 html按钮变色代码按钮变色效果html html 渐变色按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50347.html

移动端模拟hover：按钮点击变色之后还原

摘要：移动端按钮点击变色之后还原按钮按钮方法三网友的力量是强大，后来从网上找到了一个列表页的，升级版。移动端模拟自定义按钮点击效果遍历子类查看有没有子类触发过动作如果子类已经触发了动作，父类则取消触发操作需求：点击按钮希望像在PC端那样有个类似于hover的效果，触摸按钮变色，手指离开变回原来的颜色；方法一：CSS3+JS 用keyframes动画，js点击按钮时添加keyframes动...

darkbug 2019-08-30 13:21 评论0 收藏0
移动端模拟hover：按钮点击变色之后还原

摘要：移动端按钮点击变色之后还原按钮按钮方法三网友的力量是强大，后来从网上找到了一个列表页的，升级版。移动端模拟自定义按钮点击效果遍历子类查看有没有子类触发过动作如果子类已经触发了动作，父类则取消触发操作需求：点击按钮希望像在PC端那样有个类似于hover的效果，触摸按钮变色，手指离开变回原来的颜色；方法一：CSS3+JS 用keyframes动画，js点击按钮时添加keyframes动...

Reducto 2019-08-20 13:39 评论0 收藏0
CSS实现8种炫酷按钮

在各种UI组件库大行其道的今天，大家已经很少自己用CSS去实现一些效果了，久而久之CSS的水平也越来越退步，所以有空还是得练练。今天给大家分享8种炫酷按钮的CSS实现。 1. 3D按钮1 showImg(https://segmentfault.com/img/remote/1460000019943760?w=640&h=192); 现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从...

fai1017 2019-08-02 15:41 评论0 收藏0
CSS实现8种炫酷按钮

在各种UI组件库大行其道的今天，大家已经很少自己用CSS去实现一些效果了，久而久之CSS的水平也越来越退步，所以有空还是得练练。今天给大家分享8种炫酷按钮的CSS实现。 1. 3D按钮1 showImg(https://segmentfault.com/img/remote/1460000019943760?w=640&h=192); 现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从...

张春雷 2019-08-30 15:44 评论0 收藏0