zoukankan      html  css  js  c++  java
  • CSS实现按钮动画

    效果如下:

    思路:

      先在按钮的外面套一个标签(overflow:hidden,position:relative),

      然后在按钮前面插入input标签透明度为0,然后使用绝对定位覆盖在按钮上面

      按钮使用相对定位,底色为灰色,然后再添加伪类元素:before做开启状态的按钮(底色为黄色),使用绝对定位在按钮右边

      圆球为按钮的伪元素:after,使用绝对定位,圆球中心点在按钮右边

      当input为:checked状态改变时,配合transition来改变按钮的left值

    示例代码:

       CSS:

    .switch{display:block;position:relative;overflow:hidden;margin:10px;width:70px;height:20px;border-radius:20px;border:1px solid #ccc;font-size: 12px;}
    .switch>input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;z-index:1;margin:0;}
    .switch>.button,.switch>.button:before{width:60px;height:100%;text-align:center;line-height:20px;font-weight:bold;color:#fff;}
    .switch>.button{position:relative;left:0;background:#6d6d6d;transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;}
    .switch>.button:before{position:absolute;top:0;left:60px;content:"ON";background:#FFA500;}
    .switch>.button:after{position:absolute;top:0;left:50px;content:"";width:18px;height:18px;border-radius:100%;border:1px solid #ddd;background:#f7f7f7;}
    .switch>input:checked+.button{left:-50px;}

     HTML:

        <div class="switch">
            <input type="checkbox"/>
            <div class="button">OFF</div>
        </div>
     

    在线演示:http://sandbox.runjs.cn/show/n9q9lbv4

  • 相关阅读:
    Thymeleaf使用
    关闭被占用端口
    在map、model、modelAndView中存放数据 回显
    @RequestAttribute 注解
    @PathVariable、@RequestHeader、@RequestParam、@RequestBody 注解使用
    RESTful风格请求映射
    yml文件 数据回显
    JVM垃圾回收与一次线上内存泄露问题分析和解决过程
    比较java_io_Externalizable和Serializable
    关于java中的对象序列化
  • 原文地址:https://www.cnblogs.com/chenxiangling/p/7693116.html
Copyright © 2011-2022 走看看