欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3編寫類似iOS中的復(fù)選框及帶開關(guān)的按鈕

WEB前端開發(fā)   發(fā)布時間：2016-04-11 11:50:55   作者：愚人碼頭   我要評論
這篇文章主要介紹了使用CSS3編寫類似iOS中的復(fù)選框及帶開關(guān)的按鈕,需要的朋友可以參考下

checkbox多選

最近寫了一個適合移動端的checkbox，如圖：
2016411114913458.png (812×522)

ps：中間的勾勾是iconfont，iOS風(fēng)格的。

具體的HTML：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="mui-checkbox-con">  
  2.     <label>  
  3.         <input class="mui-checkbox" type="checkbox">默認未選中</label>  
  4. </div>  
  5. <div class="mui-checkbox-con">  
  6.     <label>  
  7.         <input class="mui-checkbox" type="checkbox" checked>默認選中</label>  
  8. </div>  
  9. <div class="mui-checkbox-con">  
  10.     <label>  
  11.         <input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黃色 checkbox-orange</label>  
  12. </div>  
  13. <div class="mui-checkbox-con">  
  14.     <label>  
  15.         <input class="mui-checkbox checkbox-green" type="checkbox" checked>綠色 checkbox-green</label>  
  16. </div>  
  17. <div class="mui-checkbox-con">  
  18.     <label>  
  19.         <input class="mui-checkbox" type="checkbox" disabled>禁用</label>  
  20. </div>  

CSS代碼（SCSS導(dǎo)出的，排版有些奇怪）：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .mui-checkbox {   
  2.   -webkit-appearance: none;   
  3.   position: relative;   
  4.   width: 25px;   
  5.   height: 25px;   
  6.   margin-right: 10px;   
  7.   background-color: #FFFFFF;   
  8.   border: solid 1px #d9d9d9;   
  9.   border-top-left-radius: 20px;   
  10.   border-top-rightright-radius: 20px;   
  11.   border-bottom-left-radius: 20px;   
  12.   border-bottom-rightright-radius: 20px;   
  13.   background-clip: padding-box;   
  14.   display: inline-block; }   
  15.   .mui-checkbox:focus {   
  16.     outline: 0 none;   
  17.     outline-offset: -2px; }   
  18.   .mui-checkbox:checked {   
  19.     background-color: #18b4ed;   
  20.     border: solid 1px #FFFFFF; }   
  21.     .mui-checkbox:checked:before {   
  22.       display: inline-block;   
  23.       margin-top: 1px;   
  24.       margin-left: 2px;   
  25.       font-family: iconfont;   
  26.       content: "\e667";   
  27.       color: #FFFFFF;   
  28.       font-size: 18px; }   
  29.   .mui-checkbox:disabled {   
  30.     background-color: #d9d9d9;   
  31.     border: solid 1px #d9d9d9; }   
  32.     .mui-checkbox:disabled:before {   
  33.       display: inline-block;   
  34.       margin-top: 1px;   
  35.       margin-left: 2px;   
  36.       font-family: iconfont;   
  37.       content: "\e667";   
  38.       color: #FFFFFF;   
  39.       font-size: 18px; }   
  40.   .mui-checkbox.checkbox-green:checked {   
  41.     background-color: #5cb85c; }   
  42.   .mui-checkbox.checkbox-orange:checked {   
  43.     background-color: #f0ad4e; }   
  44.   .mui-checkbox.checkbox-s {   
  45.     width: 19px;   
  46.     height: 19px; }   
  47.     .mui-checkbox.checkbox-s:before {   
  48.       display: inline-block;   
  49.       margin-top: 1px;   
  50.       margin-left: 2px;   
  51.       font-family: iconfont;   
  52.       content: "\e667";   
  53.       color: #FFFFFF;   
  54.       font-size: 13px; }   
  55.     
  56. .mui-checkbox-anim {   
  57.   -webkit-transition: background-color ease 0.2s;   
  58.           transition: background-color ease 0.2s; }  

SCSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @mixin checkedCon($fs:18px) {   
  2.   &:before {   
  3.     display: inline-block;   
  4.     margin-top: 1px;   
  5.     margin-left: 2px;   
  6.     font-family: iconfont;   
  7.     content: "\e667";   
  8.     color: #FFFFFF;   
  9.     font-size: $fs;   
  10.   }   
  11. }   
  12. $duration: .4s;   
  13. .mui-checkbox {   
  14.   -webkit-appearance: none;   
  15.   position: relative;   
  16.   width: 25px;   
  17.   height: 25px;   
  18.   margin-right: 10px;   
  19.   background-color: #FFFFFF;   
  20.   border: solid 1px #d9d9d9;   
  21.   border-top-left-radius: 20px;   
  22.   border-top-rightright-radius: 20px;   
  23.   border-bottom-left-radius: 20px;   
  24.   border-bottom-rightright-radius: 20px;   
  25.   background-clip: padding-box;   
  26.   display: inline-block;   
  27.   &:focus {   
  28.     outline: 0 none;   
  29.     outline-offset: -2px  
  30.   }   
  31.   &:checked {   
  32.     background-color: #18b4ed;   
  33.     border: solid 1px #FFFFFF;   
  34.     @include checkedCon();   
  35.   }   
  36.   &:disabled {   
  37.     background-color: #d9d9d9;   
  38.     border: solid 1px #d9d9d9;   
  39.     @include checkedCon();   
  40.   }   
  41.   &.checkbox-green:checked {   
  42.     background-color: #5cb85c;   
  43.   }   
  44.   &.checkbox-orange:checked {   
  45.     background-color: #f0ad4e;   
  46.   }   
  47.   &.checkbox-s {   
  48.     width: 19px;   
  49.     height: 19px;   
  50.     @include checkedCon(13px);   
  51.   }   
  52. }   
  53.     
  54. .mui-checkbox-anim{   
  55.   //border等其他元素不做過渡效果，增加視覺差，更有動畫效果   
  56.   transition: background-color ease $duration/2;   
  57.     
  58. }  

 
帶switch開關(guān)
本身我做這一個ui的目的是支持移動端的頁面，而webkit上也正好支持單標記的input元素是使用偽類（:before或:after），所以我沒做更多的支持和優(yōu)化，我只是想盡量的保持html干凈，所以沒用其他元素做模擬。如果你要使用在桌面應(yīng)用上，或支持其他瀏覽器，可以自己稍微修改一下，反正我是沒測試過。

今天繼續(xù)分享一個iOS風(fēng)格的switch開關(guān)按鈕，樣子也非常常見，如圖：
2016411115110047.png (818×350)

主要是使用了<input  type="checkbox">來模擬實現(xiàn)，具體的HTML：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <label><input class="mui-switch" type="checkbox"> 默認未選中</label>  
  2. <label><input class="mui-switch" type="checkbox" checked> 默認選中</label>  
  3. <label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默認未選中,簡單的背景過渡效果,加mui-switch-animbg類即可</label>  
  4. <label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默認選中</label>  
  5. <label><input class="mui-switch mui-switch-anim" type="checkbox"> 默認未選中，過渡效果，加 mui-switch-anim   
  6. 類即可</label>  
  7. <label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默認選中</label>  

在實際的使用中后來又增加了兩個過渡效果，分別加 mui-switch-animbg和mui-switch-anim 類即可，具體效果查看下面的demo頁面。

CSS代碼（SCSS導(dǎo)出的，排版有些奇怪）：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .mui-switch {   
  2.   width: 52px;   
  3.   height: 31px;   
  4.   position: relative;   
  5.   border: 1px solid #dfdfdf;   
  6.   background-color: #fdfdfd;   
  7.   box-shadow: #dfdfdf 0 0 0 0 inset;   
  8.   border-radius: 20px;   
  9.   border-top-left-radius: 20px;   
  10.   border-top-rightright-radius: 20px;   
  11.   border-bottom-left-radius: 20px;   
  12.   border-bottom-rightright-radius: 20px;   
  13.   background-clip: content-box;   
  14.   display: inline-block;   
  15.   -webkit-appearance: none;   
  16.   user-select: none;   
  17.   outline: none; }   
  18.   .mui-switch:before {   
  19.     content: '';   
  20.     width: 29px;   
  21.     height: 29px;   
  22.     position: absolute;   
  23.     top: 0px;   
  24.     left: 0;   
  25.     border-radius: 20px;   
  26.     border-top-left-radius: 20px;   
  27.     border-top-rightright-radius: 20px;   
  28.     border-bottom-left-radius: 20px;   
  29.     border-bottom-rightright-radius: 20px;   
  30.     background-color: #fff;   
  31.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }   
  32.   .mui-switch:checked {   
  33.     border-color: #64bd63;   
  34.     box-shadow: #64bd63 0 0 0 16px inset;   
  35.     background-color: #64bd63; }   
  36.     .mui-switch:checked:before {   
  37.       left: 21px; }   
  38.   .mui-switch.mui-switch-animbg {   
  39.     transition: background-color ease 0.4s; }   
  40.     .mui-switch.mui-switch-animbg:before {   
  41.       transition: left 0.3s; }   
  42.     .mui-switch.mui-switch-animbg:checked {   
  43.       box-shadow: #dfdfdf 0 0 0 0 inset;   
  44.       background-color: #64bd63;   
  45.       transition: border-color 0.4s, background-color ease 0.4s; }   
  46.       .mui-switch.mui-switch-animbg:checked:before {   
  47.         transition: left 0.3s; }   
  48.   .mui-switch.mui-switch-anim {   
  49.     transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; }   
  50.     .mui-switch.mui-switch-anim:before {   
  51.       transition: left 0.3s; }   
  52.     .mui-switch.mui-switch-anim:checked {   
  53.       box-shadow: #64bd63 0 0 0 16px inset;   
  54.       background-color: #64bd63;   
  55.       transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; }   
  56.       .mui-switch.mui-switch-anim:checked:before {   
  57.         transition: left 0.3s; }   
  58.     
  59. /*# sourceMappingURL=mui-switch.css.map */  

SCSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @mixin borderRadius($radius:20px) {   
  2.   border-radius: $radius;   
  3.   border-top-left-radius: $radius;   
  4.   border-top-rightright-radius: $radius;   
  5.   border-bottom-left-radius: $radius;   
  6.   border-bottom-rightright-radius: $radius;   
  7. }   
  8.     
  9. $duration: .4s;   
  10. $checkedColor: #64bd63;   
  11. .mui-switch {   
  12.   width: 52px;   
  13.   height: 31px;   
  14.   position: relative;   
  15.   border: 1px solid #dfdfdf;   
  16.   background-color: #fdfdfd;   
  17.   box-shadow: #dfdfdf 0 0 0 0 inset;   
  18.   @include borderRadius();   
  19.   background-clip: content-box;   
  20.   display: inline-block;   
  21.   -webkit-appearance: none;   
  22.   user-select: none;   
  23.   outline: none;   
  24.   &:before {   
  25.     content: '';   
  26.     width: 29px;   
  27.     height: 29px;   
  28.     position: absolute;   
  29.     top: 0px;   
  30.     left: 0;   
  31.     @include borderRadius();   
  32.     background-color: #fff;   
  33.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);   
  34.   }   
  35.   &:checked {   
  36.     border-color: $checkedColor;   
  37.     box-shadow: $checkedColor 0 0 0 16px inset;   
  38.     background-color: $checkedColor;   
  39.     &:before {   
  40.       left: 21px;   
  41.     }   
  42.   }   
  43.   &.mui-switch-animbg {   
  44.     transition: background-color ease $duration;   
  45.     &:before {   
  46.       transition: left 0.3s;   
  47.     }   
  48.     &:checked {   
  49.       box-shadow: #dfdfdf 0 0 0 0 inset;   
  50.       background-color: $checkedColor;   
  51.       transition: border-color $duration, background-color ease $duration;   
  52.       &:before {   
  53.         transition: left 0.3s;   
  54.       }   
  55.     }   
  56.     
  57.   }   
  58.   &.mui-switch-anim {   
  59.     transition: border cubic-bezier(0, 0, 0, 1) $duration, box-shadow cubic-bezier(0, 0, 0, 1) $duration;   
  60.     &:before {   
  61.       transition: left 0.3s;   
  62.     }   
  63.     &:checked {   
  64.       box-shadow: $checkedColor 0 0 0 16px inset;   
  65.       background-color: $checkedColor;   
  66.       transition: border ease $duration, box-shadow ease $duration, background-color ease $duration*3;   
  67.       &:before {   
  68.         transition: left 0.3s;   
  69.       }   
  70.     }   
  71.     
  72.   }   
  73. }  

相關(guān)文章

最新評論