zoukankan      html  css  js  c++  java
  • 移动端按钮交互变色实

    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

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

  • 相关阅读:
    微服务全链路剖析
    记一次被挖矿经历
    centos权限总结
    Beizer。。。。。
    遇到的几个算法
    程序截图
    CFileViewer(文件浏览器)
    框架设计
    git常用代码
    右值引用
  • 原文地址:https://www.cnblogs.com/laayoune/p/5524794.html
Copyright © 2011-2022 走看看