移动端按钮交互变色实

web开发过程中,移动端按钮交互效果,点击按钮变色

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        document.body.addEventListener('touchstart', function () {});
    </script>
    <style>
    .btn{
        font-size: 1.5em;
        line-height: 2em;
        text-align: center;
        color: #fff;
        background: #ce4f54;
         200px;
    }
    .btn:hover,
    .btn:active,
    .btn:focus{
        background: #043d5d;
    }
    </style>
    <title>无标题文档</title>
</head>

<body>
    <div class="btn">测试Test</div>
</body>

</html>

  如果不绑定事件,在pc和安卓上可以实现

  绑定事件为了在ios中生效;

使用css3属性实现缓交互

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    .btn{
        font-size: 1.5em;
        line-height: 2em;
        text-align: center;
        color: #fff;
        background: #ce4f54;
         200px;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -o-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -ms-transition: 0.5s all;
    }
    .btn:hover,
    .btn:active{
        background: #043d5d;
    }
    </style>
    <title>无标题文档</title>
</head>

<body>
    <div class="btn">测试Test</div>
</body>

</html>

  3、通过js操作class

这个已经很多人写了,就不用写例子了

原文地址:https://www.cnblogs.com/laayoune/p/5524794.html