<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            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平滑開關按鈕內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

            相關文章

            最新評論

            hao500彩票 www.jshongfu56.com:怀仁县| www.danwolfforsenate.com:彭山县| www.thanlula.com:怀化市| www.b-ads.com:常德市| www.asmyachtsigns.com:桐梓县| www.crecerjuntosmex.com:盐津县| www.qatarsworldcup.com:河源市| www.jacobswelldrilling.net:新丰县| www.daliancreation.com:阳春市| www.farmaboti.com:海淀区| www.dubailandresort.com:顺义区| www.brixton-hardware.com:合江县| www.jmin00.com:澄城县| www.psicologiaconsciente.com:九龙坡区| www.dawidswierczek.com:新民市| www.xinya-painting.com:沂南县| www.cp5776.com:舒城县| www.hokhauhanoi24h.com:鹤山市| www.qz773.com:长白| www.ty3399.com:富源县| www.bisutekirevere.com:临洮县| www.cp3309.com:霍城县| www.wi-fisys.com:巩留县| www.lakehousemitchell.com:米脂县| www.hg61456.com:梅河口市| www.suntikputihdahlia.net:铜梁县| www.divided-games.com:屯昌县| www.beijingshengbo.com:大竹县| www.ideabridgepromos.com:宁海县| www.dolls-haven.com:西平县| www.hkbfw.cn:棋牌| www.jipiao126.com:南部县| www.calentopia.com:舟曲县| www.hoyins.com:三河市| www.cp7110.com:政和县| www.beijingshengbo.com:洛南县| www.beautyincarnate.com:恭城| www.findadetoxnow.com:丰镇市| www.oudeshu.com:黎城县| www.ktv198.com:博湖县| www.zm833.com:应城市| www.cdhkedu.com:讷河市| www.shguwanpm.com:逊克县| www.tianlijiqi.com:如皋市| www.techidana.com:锡林郭勒盟| www.vailplex.com:临城县| www.yz-tygy.com:大冶市| www.sifancn.com:都兰县| www.rbstt.com:三台县| www.qshinny.com:霸州市| www.jnshengping.com:新丰县| www.jllnt.com:马边| www.dlhypc.com:望城县| www.air-max-run.com:长治市| www.daikaisu.com:铜鼓县| www.zhfu8.com:石渠县| www.sunsetinnusa.com:格尔木市| www.xinxinglin.net:高阳县| www.agrinafta.com:沽源县| www.qqyyzs.com:大城县| www.yiyituofu.com:泰来县| www.70088z.com:扎兰屯市| www.sterlingsilvergifts.com:晴隆县| www.soccer-cleats-usa.com:龙州县| www.myqccoupons.com:福安市| www.82aaaa.com:牙克石市| www.seocontest2008.com:馆陶县| www.champaignilmls.com:固原市| www.hanselapp.com:武隆县| www.gumur.com:鄂托克旗| www.stranded-deep.net:闻喜县| www.snowkeyice.com:华阴市| www.shnanyabxg.com:将乐县| www.cmagermany.com:梁河县| www.tw-graphics.com:扎兰屯市| www.jzyxny.com:恩施市| www.vintage-denim.com:白水县| www.leonardhaleyelectric.com:枣强县| www.xingyixiehe.com:惠东县| www.golobd.com:象州县| www.zibohonglu.com:吉木萨尔县| www.desiessence.com:玛沁县| www.g5669.com:顺平县| www.repingou.com:琼海市|