<rp id="kut09"><nav id="kut09"></nav></rp>
<rp id="kut09"></rp>
  • <tt id="kut09"></tt>
    <tt id="kut09"><tbody id="kut09"></tbody></tt>
    1. <u id="kut09"></u>
    2. <tt id="kut09"><noscript id="kut09"></noscript></tt>
    3. CSS仿蘋果平滑開關按鈕效果

        發布時間:2020-12-25 09:13:29   作者:隨遇丿而安   我要評論
      這篇文章主要介紹了CSS仿蘋果平滑開關按鈕效果,本文通過實例代碼給大家介紹的非常想詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

      源碼

      1. 代碼解析

      1.1 html 代碼解析

      <div class="checkbox">
        <div class="inner" id="inner">
          <div class="toggle" id="toggle"></div>
        </div>
      </div>

      最外層 checkbox, 是按鈕的整體, inner 是ON下綠色框所占的區域, toggle 是能點擊的 ON 和 OFF 區域.

      1.2 css 代碼解析設置 body 字體和背景色

      body{
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: #dcdcdc;
      }

      設置按鈕的背景色, 位置, 圓形邊框, 上下邊框顏色和厚度

      .checkbox{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 50px;
        border-radius: 25px;
        background: linear-gradient(0deg, #d8d8d8, #cccccc);
        border-top: 0.02em solid #ececec;
        border-bottom: 0.02em solid #ececec;
      }

      設置 綠色底色區域 的上下左右位置, 以此確定寬度和高度, 注意, 這里沒設寬度和高度, 默認是 auto

      設置背景, 圓形邊框, 陰影

      .checkbox .inner{
        position: absolute;
        /* 因為沒設寬和高, 所以可以這樣 */
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: linear-gradient(0deg, #a5a5a5, #717171);
        border-radius: 20px;
        box-shadow: inset 0 0 15px rgba(0,0,0,.5);
      }

      設置 ON OFF 按鈕大小, 位置, 顏色, 背景, 陰影, 頂部和底部邊框樣式, 設置按鈕上的動畫時間為 0.5s

      .checkbox .inner .toggle{
        position: absolute;
        top: -3px;
        left: -3px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(0deg, #ccc, #e4e4e4);
        box-shadow: 0 4px 6px rgba(0,0,0,.2);
        box-sizing: border-box;
        border-top: 0.04em solid #ececec;
        border-bottom: 0.01em solid #ececec;
        transition: 0.5s;
      }

      設置 OFF 的樣式,, 由上下左右的定位確定 寬和高, 設置背景, 圓形邊框, line-height 用來設置字體垂直居中

      .checkbox .inner .toggle:before{
        content: "OFF";
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        background: linear-gradient(0deg, #e4e4e4, #ccc);
        border-radius: 50%;
        text-align: center;
        font-size: 10px;
        line-height: 28px;
        color: #a9a9a9;
      }

      設置 點擊后按鈕的字體, ON, 之所有沒有寫其他屬性, 是因為其他屬性都繼承 checkbox .inner .toggle:before

      .checkbox .inner.active .toggle:before{
        content: "ON";
        color: #00d22d;
      }

      當按鈕被點擊, 滑塊右移, 并且更改背景色, 更改時間為 0.5s

      .checkbox .inner.active .toggle{
        left: 47px;
      }
      .checkbox .inner.active{
        background: linear-gradient(0deg, #00d22d, #158a00);
      }

      1.3 javascript 代碼解析

      <script>
        let inner = document.getElementById('inner');
        let toggle = inner.children[0];
        toggle.addEventListener('click', ()=>{
          if(inner.classList.contains('active')){
            inner.classList.remove('active');
          }else {
            inner.classList.add('active');
          }
        })
      </script>
      • 首先獲取到 inner 和 toggle, 一個背景色框, 一個圓形按鈕
      • 給按鈕 toggle 注冊點擊事件, 點擊 ON OFF 按鈕才有效
      • 當 inner 處于 active, 也就是 inner 元素包含 active 類, 那就移除, 如果不包含, 那就添加, 反正做一個相反的操作
      • 當 inner 處于 active, toggle 會右移, inner 背景色會變換, 在 css中 設置
      • 大功告成, 過程如下圖


       

      2. 源碼

      2.1 html 源碼

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="2020_12_24.css">
      </head>
      <body>
      <div class="checkbox">
        <div class="inner" id="inner">
          <div class="toggle" id="toggle"></div>
        </div>
      </div>
      <script>
        let inner = document.getElementById('inner');
        let toggle = inner.children[0];
        toggle.addEventListener('click', ()=>{
          if(inner.classList.contains('active')){
            inner.classList.remove('active');
          }else {
            inner.classList.add('active');
          }
        })
      </script>
      </body>
      </html>

      2.2 css 源碼

      body{
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: #dcdcdc;
      }
      .checkbox{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 50px;
        border-radius: 25px;
        background: linear-gradient(0deg, #d8d8d8, #cccccc);
        border-top: 0.02em solid #ececec;
        border-bottom: 0.02em solid #ececec;
      }
      .checkbox .inner{
        position: absolute;
        /* 因為沒設寬和高, 所以可以這樣 */
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: linear-gradient(0deg, #a5a5a5, #717171);
        border-radius: 20px;
        box-shadow: inset 0 0 15px rgba(0,0,0,.5);
      }
      .checkbox .inner .toggle{
        position: absolute;
        top: -3px;
        left: -3px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(0deg, #ccc, #e4e4e4);
        box-shadow: 0 4px 6px rgba(0,0,0,.2);
        box-sizing: border-box;
        border-top: 0.04em solid #ececec;
        border-bottom: 0.01em solid #ececec;
        transition: 0.5s;
      }
      .checkbox .inner .toggle:before{
        content: "OFF";
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        background: linear-gradient(0deg, #e4e4e4, #ccc);
        border-radius: 50%;
        text-align: center;
        font-size: 10px;
        line-height: 28px;
        color: #a9a9a9;
      }
      .checkbox .inner.active .toggle:before{
        content: "ON";
        color: #00d22d;
      }
      .checkbox .inner.active .toggle{
        left: 47px;
      }
      .checkbox .inner.active{
        background: linear-gradient(0deg, #00d22d, #158a00);
      }

      到此這篇關于CSS仿蘋果平滑開關按鈕效果的文章就介紹到這了,更多相關css平滑開關按鈕內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      相關文章

      最新評論

      218彩票 www.5387753.com:东乡| www.conceptflame.com:临潭县| www.ramblingabare.com:慈利县| www.autocity-curacao.com:汪清县| www.whoneedsaneditor.com:贵定县| www.votegregwalker.com:女性| www.xdhunganh.com:永川市| www.180xu.com:诸城市| www.whobuysthesethings.com:吴川市| www.doulasconciencia.com:三门峡市| www.mannequin-enfant.com:穆棱市| www.povprofits.com:长武县| www.yurindex.com:芜湖市| www.852315.com:新兴县| www.tvhmoob.com:荣昌县| www.ukbmw.com:璧山县| www.youetme.com:昌宁县| www.cp1150.com:措勤县| www.686105.com:华宁县| www.shaileshsinha.com:彰化县| www.elite-a.com:神池县| www.techidana.com:喀什市| www.modernmosesclothingcompany.com:栾川县| www.110df.com:永泰县| www.jbjt888.com:廊坊市| www.ift-expertise.com:长岭县| www.cp3359.com:财经| www.convites-casamento.com:丹凤县| www.boshichiji.com:隆安县| www.socllink.com:大埔区| www.modemize.com:阳江市| www.runtongin.com:丁青县| www.onetimeofferz.com:阳朔县| www.hyrscg.net:乐业县| www.onewaytoliveband.com:贡嘎县| www.ofnail.com:云龙县| www.cz-xhw.com:新河县| www.zgfysy.com:兴宁市| www.tangoporteno.org:南华县| www.lzxingcheng.com:绵竹市| www.kpwgw.cn:资溪县| www.commonelementllc.com:田东县| www.champaignilmls.com:政和县| www.apics-hawaii.org:共和县| www.ranwenshu.com:商河县| www.lizsalmon.com:冀州市| www.cbrpw.cn:茶陵县| www.klxjw.cn:永福县| www.qm-cz.com:右玉县| www.arcondb.com:中方县| www.kjjdyp.com:黄大仙区| www.wisataboyolali.com:嵩明县| www.ctr-fk2register.com:抚宁县| www.kates-garden.com:新余市| www.yarnknittingyarn.com:民勤县| www.inretrospectweb.com:延吉市| www.glad4health.com:卢湾区| www.princesstickets.com:姜堰市| www.ttjm6898lsc.com:宣城市| www.u-lott.com:文水县| www.delatan.com:营口市| www.rjccw.cn:通化市| www.tztrelleborg.com:搜索| www.sihaicsw.com:南江县| www.thevargasgroup.net:锦屏县| www.aw368.com:桐城市| www.vailplex.com:阿坝县| www.toyanaepf.com:乌兰察布市| www.ebwww.com:朝阳区| www.pret-pas-cher.com:仲巴县| www.mesutaydin.com:任丘市| www.077189.com:慈溪市| www.ourmanufacturers.com:海口市| www.acehobbyaustralia.com:房山区| www.tonivlee.com:顺义区| www.hg16456.com:西城区| www.elliswoodcollection.com:通河县| www.jyodhisham.com:增城市| www.allaboutcleaningmonterey.com:宁强县| www.czxinlai.com:会理县| www.4-card-poker-online.com:庄浪县| www.jiechangjs.com:安仁县| www.cloudhostingcity.com:马鞍山市| www.982610.com:兴海县|