如何使用CSS3+JS繪製各種各樣按鈕的範例程式碼分享

來源:互聯網
上載者:User

我認為按鈕的繪製分以下三個步驟

  • 第一步,繪製按鈕的輪廓

    • 選擇合適的html標籤,設定輪廓的CSS

/* html代碼 */<a href="#" class="button off"></a>body{    background-color: #E6C9B6;}/* CSS樣式 *//* 按鈕輪廓 */.button{    display: block;    margin:100px auto;    position: relative;    width:100px;    height:40px;    border-radius: 50px;    border:1px solid #fff;    background-color: #E9E4E0;}


仿IOS-1.jpg

  • 第二步,繪製按鈕的預設狀態

    • 這一步很重要,由於我們不會再給html檔案添加其他的標籤,所以我們需要用 :after 偽類對按鈕進行CSS渲染

      /* 接在上面繼續寫 */.button:after{   display: block;   position: absolute;    //相對按鈕的輪廓進行決定定位   top:2px;   bottom: 2px;        //即設定top,又設定bottom使元素自動展開到最大   left:2px;           //實際上,按鈕的寬度即為容器的高度-(top+bottom)   width:36px;           //按鈕的寬度   line-height: 36px;    //按鈕文字的高度,如果不需要文字,可移除   text-align: center;   text-transform: uppercase;   font-size: 16px;   background-color: #fff;      //這裡的背景顏色是按鈕的背景顏色   border:2px solid;   transition: all 500ms;        //按鈕的動畫時間長度}

      實際上,做到這一步之後會發現,在瀏覽器上的效果沒有一點變化,還是之前的那樣子,不過不用著急,我們再加一點東西就很明顯了

    • 在輪廓內添加小按鈕

      .off:after {   content: 'off';   border-radius:30px;   color: #999;}

      預設為off狀態


仿IOS-2.jpg

- 再接著繪製要切換的狀態
.on:after {          content: 'ON';          border-radius:30px;          transform: translate(56px, 0);             color:transparent;          background-color:#4BD429;        }


仿IOS-3.jpg

  • 最後一步,寫JS代碼進行切換

    實際上,在CSS的切換之中,toggleClass是最為方便的。
    但是!!!
    這種切換方法不能切換你要觸發的JS事件,
    畢竟,我們畫按鈕是為了完成某些功能,
    所以我採用的是這種方式,但也許並不是最好的

    var zn=0;$('.button').click(function(e){  if(zn==1){      $(this).removeClass("on").addClass("off");      //此處可填要觸發的事件      zn=0;  }else{      $(this).removeClass("off").addClass("on");       //此處可填要觸發的事件      zn=1;  }});

    到此,一個完整的開關按鈕就繪製完成了
    感謝你能花3~5分鐘的時間閱覽我不專業的教程

PS:昨天要繪製一個按鈕控制燈泡的開關(實際上就是切換背景圖片),然後我四周一看,看到了牆壁上的一個公牛開關,既然是控制電燈的,我就想玩一玩模擬開關,忍著中午的睡意,還真勉強的給繪製出來了
  繪製過程並不複雜,我也就不細說了,貼下和代碼,感興趣的可以自行看一下


模擬開關.jpg


模擬-2.jpg

PS:我引用了一個初始化的CSS檔案,可能需要box-sizing:border-box;<style type="text/css">    /*開關的輪廓*/    .button{        display: block;        position: relative;        width:160px;        height:180px;        border-radius: 5px;        background-color: #f1f1f1;    }    .button2{        display: block;        position: relative;        width:160px;        height:180px;        border-radius: 5px;        background-color: #f1f1f1;    }    /*指示燈*/    .indicate{        display: block;        position: absolute;        margin:60px 0 0 70px;        width: 20px;        height: 4px;        border-radius: 2px;        background-color: #A8C1C2;        z-index: 1;        transition: all 200ms;    }    .indicate_yes{        margin:69px 0 0 70px;        background-color: #A3D7E7;    }    /*開關內部的小按鈕*/    .button:after{        display: block;        position: absolute;        top:40px;        bottom: 40px;        left:20px;        right:20px;        line-height: 52px;        border:1px solid #FFF;        transition: all 200ms;    }    .button2:after{        display: block;        position: absolute;        top:49px;        bottom: 31px;        left:20px;        right:20px;        line-height: 52px;        border:1px solid #FFF;        transition: all 200ms;    }    /*預設狀態的小按鈕*/    .on:after {      content: '';      border-radius: 5px;      /* CSS3的色彩坡形凸顯按鈕的凸出感 */      background: linear-gradient(#fff, #f2f2f2 80%,#fff);      /* CSS3的影音的綜合應用,繪製按鈕的邊緣,給予立體感 */      box-shadow: 0 1px 0 0 #fff,          0 3px 0.5px 0 #E7E9EA,          0 5px 0.5px 0 #DEDFDF,          0 6px 0.5px 0 #CCCCCD,          0 7px 0.5px 0 #C5C7C7,          0 8px 2px 0 #818283,          0 9px 2px 0 #A7A8A8;    }    /*關閉後的小按鈕*/    .off:after {      content: '';      border-radius: 5px;      background: linear-gradient(#fff, #f2f2f2 80%,#fff);      box-shadow: 0 -1px 0 0 #fff,          0 -3px 0.5px 0 #E7E9EA,          0 -5px 0.5px 0 #DEDFDF,          0 -6px 0.5px 0 #CCCCCD,          0 -7px 0.5px 0 #C5C7C7,          0 -8px 2px 0 #818283,          0 -9px 2px 0 #A7A8A8;    }    </style> /* JS代碼 */<script type="text/javascript">$('.button').click(function(e) {  var toggle = this;  e.preventDefault();  $(toggle).toggleClass('on')         .toggleClass('off')         .toggleClass("button2");  //指示燈亮/滅  $(this).children(".indicate")    .toggleClass("indicate_yes");});//localStorage.clear();</script>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.