zoukankan      html  css  js  c++  java
  • CSS+DIV实现开关组件

    普通开关按钮

    UI效果:将元素设置为背景,再利用元素的::before/::after绘制为开关触点。
    交互思路:为元素添加状态样式,更迭背景色以及触点偏移值实现开关转换。当然可以额外添加一个checkbox元素,利用[checked]属性充当状态样式可以省去一些事件监听上的工作

    <style>
    .na-switch {
         48px;
        height: 24px;
        border-radius: 12px;
        border:0;
        cursor: pointer;
        position: relative;
        padding: 3px;
        font-size: 0;
        background: #B3B3B3;
        transition: all 0.24s ease-out;
        -webkit-transition: all 0.24s ease-out;	
    }
    .na-switch::before {
        content: '';
        position: absolute;
         16px;
        height: 16px;
        border-radius: 50%;
        top: 4px;
        left: 4px;
        background: #fff;
        transition: all 0.24s ease-out;
        -webkit-transition: all 0.24s ease-out;	
    }
    .na-switch-on {
        background: #4A90E2;
    }
    .na-switch-on::before {
        left: 28px; /* 48-6-16 */
    }
    .na-switch[disabled] {
        cursor: not-allowed;
    }
    </style>
    <h4>开关</h4>
    <button class="na-switch"></button>
    <button class="na-switch na-switch-on"></button>
    <button class="na-switch na-switch-on" disabled></button>
    

    效果如下:

    敌人总是会在你最不想它出现的地方出现!
  • 相关阅读:
    【备忘】(可持久化)线段树
    和别人一起搞的模拟赛 (1) 题解
    和别人一起搞的模拟赛 (1) 题面
    【讲课】基础的数论知识
    斐波那契
    luogu P6222
    luogu P4240
    二分图网络流做题记录
    ds 瞎做
    P6943 [ICPC2018 WF]Conquer The World 解题报告
  • 原文地址:https://www.cnblogs.com/longhx/p/14503249.html
Copyright © 2011-2022 走看看