如何使用CSS3+JS繪製各種各樣按鈕的範例程式碼分享-css教學-PHP中文網

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

黄舟

發布： 2017-06-18 13:27:29

原創

1892 人瀏覽過

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

第一步，繪製按鈕的輪廓

##選擇合適的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: &#39;off&#39;;
   border-radius:30px;
   color: #999;
}

登入後複製

預設為off狀態

仿IOS-2.jpg

- 再接着绘制要切换的状态

登入後複製

.on:after {
          content: &#39;ON&#39;;
          border-radius:30px;
          transform: translate(56px, 0);   
          color:transparent;
          background-color:#4BD429;
        }

登入後複製

#仿IOS-3. jpg

最後一步，寫JS程式碼切換
其實，在CSS的切換之中，toggleClass是最方便的。
但是！！！
這種切換方法不能切換你要觸發的JS事件，
畢竟，我們畫按鈕是為了完成某些功能，
所以我採用的是這種方式,但也許並不是最好的
```
var zn=0;
$(&#39;.button&#39;).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: &#39;&#39;;
      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: &#39;&#39;;
      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">
$(&#39;.button&#39;).click(function(e) {
  var toggle = this;
  e.preventDefault();
  $(toggle).toggleClass(&#39;on&#39;)
         .toggleClass(&#39;off&#39;)
         .toggleClass("button2");
  //指示灯亮/灭
  $(this).children(".indicate")
    .toggleClass("indicate_yes");
});

//localStorage.clear();
</script>

登入後複製

以上是如何使用CSS3+JS繪製各種各樣按鈕的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！