<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.sihaicsw.com:鄂尔多斯市| www.jessinet.com:德钦县| www.mastersengenharia.com:湟中县| www.madinafrica.com:兴山县| www.friesenabmeyer.com:望谟县| www.fusion-mania.com:青海省| www.biosourcepharm.com:延边| www.pieelectronics.com:普安县| www.karimjavadi.com:株洲县| www.iikkee.com:义乌市| www.pengdaclothing.com:台北县| www.ixiaoo.com:蕉岭县| www.calismdmrxonline.com:长葛市| www.satext.com:三原县| www.02art.com:漳平市| www.1212312.com:古浪县| www.gy45.com:新巴尔虎左旗| www.chord-tutor.com:盘山县| www.7mbct.com:舒城县| www.live2save2live.com:玛曲县| www.sllgj.com:克拉玛依市| www.ericagarliebphotography.com:盐津县| www.hzs66.com:大方县| www.myoldagehome.com:怀安县| www.kylegreerrocks.com:徐汇区| www.gzbjbgs.com:灌阳县| www.stokistgreenworld.com:渑池县| www.z5828.com:磐石市| www.1dcode.com:青浦区| www.best-wpthemes.com:泽州县| www.airmaxshoesnike.net:河北省| www.yzabtattoo.com:双鸭山市| www.shopzall.com:汨罗市| www.isabel-duque.com:卢湾区| www.attitude-digital.com:甘肃省| www.kljlw.cn:吉林市| www.italianfashionllc.com:刚察县| www.intercritics.com:涪陵区| www.nmmialumni-abq.com:江北区| www.altoconhecimento.com:隆化县| www.hvacsystemtraining.com:潍坊市| www.rlphw.cn:池州市| www.leetbar.com:博罗县| www.offreznouslolympia.com:贵定县| www.andrewcambron.com:德江县| www.debian-mirror.com:江油市| www.zumbafarnorthcoast.com:巩留县| www.china-3f.com:外汇| www.gotbadgeapp.com:南江县| www.tjgcwy.com:乳山市| www.gxcjg.com:陈巴尔虎旗| www.yh9985.com:嵩明县| www.g7552.com:康平县| www.wzs66.com:柳江县| www.chinesedrywallinspect.com:德清县| www.cawwatches.com:荥经县| www.massage-prague.net:桦南县| www.summonerscentral.com:元阳县| www.gerakansehat.com:长子县| www.glad4health.com:资溪县| www.40photography.com:阳朔县| www.petsupplydistributor.com:长白| www.lalshahbaz.com:霸州市| www.zshuamao.com:庆安县| www.microseep.com:利津县| www.radiosolmansi.org:南康市| www.chcdistribution.com:麟游县| www.phldb.com:团风县| www.jlzsd.cn:安仁县| www.denimrecords.com:洞口县| www.ninenetwork.net:东阳市| www.mancharus.com:麻江县| www.tianhaoyule.com:蓬溪县| www.4000359185.com:姜堰市| www.bxwol.com:隆安县| www.hg43456.com:棋牌| www.oranjebastion.org:柳江县| www.zjoydq.com:横山县| www.baixiaojiecaitu88.com:娄底市| www.allsignsbycos.com:兴和县| www.qslqsl.com:定陶县| www.mushroompipe.com:株洲市| www.cp5220.com:德庆县| www.bjdkth.com:东乡县|