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

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

  • 相关阅读:
    分析报告生产器使用问题
    如何使用分析报告生产器来生产图表
    基础数据代换代码
    浅谈Session与Cookie的区别与联系
    TCP和UDP的区别(转)
    项目管理技巧-怎么让代码规范执行下去
    吾日三省吾身
    C# 类型基础
    泛型
    事件与委托(续)
  • 原文地址:https://www.cnblogs.com/laayoune/p/5524794.html
Copyright © 2011-2022 走看看