首页>>表单>>纯CSS3 3D发光点击按钮切换 可用于选择性别等(2014-06-28)

纯CSS3 3D发光点击按钮切换 可用于选择性别等

纯CSS3 3D发光点击按钮切换 可用于选择性别等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="switch">  
  2.     <input type="checkbox" name="toggle">  
  3.     <label for="toggle"><i></i></label>  
  4.     <span></span>  
  5. </div>  

 

CSS Code
  1. body {  
  2. background: #202838;  
  3. }  
  4.   
  5. .switch input {  
  6.   top: 0;   
  7.   rightright: 0;   
  8.   bottombottom: 0;   
  9.   left: 0;  
  10.   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
  11.   filter: alpha(opacity=0);  
  12.   -moz-opacity: 0;  
  13.   opacity: 0;  
  14.   z-index: 100;  
  15.   position: absolute;  
  16.   width: 100%;  
  17.   height: 100%;  
  18.   cursor: pointer;  
  19. }  
  20.   
  21. .switch {  
  22.     width: 180px;  
  23.     height: 55px;  
  24.     position: relative;  
  25.     margin: 100px auto;  
  26. }  
  27.   
  28. .switch label {  
  29.     display: block;  
  30.     width: 80%;  
  31.     height: 100%;  
  32.     position: relative;  
  33.     background: #1F2736; /*#121823*/  
  34.     background: linear-gradient(#121823, #161d2b);  
  35.     border-radius: 30px 30px 30px 30px;  
  36.     box-shadow:  
  37.         inset 0 3px 8px 1px rgba(0,0,0,0.5),  
  38.         inset 0 1px 0 rgba(0,0,0,0.5),  
  39.         0 1px 0 rgba(255,255,255,0.2);  
  40.         -webkit-transition: all .5s ease;  
  41. transition: all .5s ease;  
  42.   
  43. }  
  44.   
  45. .switch input ~ label i {  
  46.     display: block;  
  47.     height: 51px;  
  48.     width: 51px;  
  49.     position: absolute;  
  50.     left: 2px;  
  51.     top: 2px;  
  52.     z-index: 2;  
  53.     border-radius: inherit;  
  54.     background: #283446; /* Fallback */  
  55.     background: linear-gradient(#36455b, #283446);  
  56.     box-shadow:  
  57.         inset 0 1px 0 rgba(255,255,255,0.2),  
  58.         0 0 8px rgba(0,0,0,0.3),  
  59.         0 12px 12px rgba(0,0,0,0.4);  
  60.     -webkit-transition: all .5s ease;  
  61. transition: all .5s ease;  
  62. }  
  63.   
  64.   
  65. .switch label + span {  
  66.     content: "";  
  67.     display: inline-block;  
  68.     position: absolute;  
  69.     rightright: 0px;  
  70.     top: 17px;  
  71.     width: 18px;  
  72.     height: 18px;  
  73.     border-radius: 10px;  
  74.     background: #283446;   
  75. background: gradient-gradient(#36455b, #283446);  
  76. box-shadow:  
  77.           inset 0 1px 0 rgba(0,0,0,0.2),  
  78.         0 1px 0 rgba(255,255,255,0.1),  
  79.         0 0 10px rgba(185,231,253,0),  
  80.   inset 0 0 8px rgba(0,0,0,0.9),  
  81.   inset 0 -2px 5px rgba(0,0,0,0.3),  
  82.   inset 0 -5px 5px rgba(0,0,0,0.5);  
  83.     -webkit-transition: all .5s ease;  
  84.     transition: all .5s ease;  
  85.     z-index: 2;  
  86. }  
  87.   
  88.  /* Toggle */  
  89. .switch input:checked ~ label + span {   
  90.     content: "";  
  91.     display: inline-block;  
  92.     position: absolute;  
  93.     width: 18px;  
  94.     height: 18px;  
  95.     border-radius: 10px;  
  96.     -webkit-transition: all .5s ease;  
  97.     transition: all .5s ease;  
  98.     z-index: 2;  
  99.     background: #b9f3fe;   
  100. background: gradient-gradient(#ffffff, #77a1b9);  
  101. box-shadow:          
  102.           inset 0 1px 0 rgba(0,0,0,0.1),  
  103.           0 1px 0 rgba(255,255,255,0.1),  
  104.           0 0 10px rgba(100,231,253,1),  
  105.           inset 0 0 8px rgba( 61,157,247,0.8),  
  106.   inset 0 -2px 5px rgba(185,231,253,0.3),  
  107.   inset 0 -3px 8px rgba(185,231,253,0.5);  
  108.   
  109.  }  
  110.   
  111. .switch input:checked ~ label i {  
  112.     left: auto;  
  113.     left: 63%;  
  114.     box-shadow:  
  115.         inset 0 1px 0 rgba(255,255,255,0.2),  
  116.         0 0 8px rgba(0,0,0,0.3),  
  117.         0 8px 8px rgba(0,0,0,0.3),  
  118.         inset -1px 0 1px #b9f3fe;  
  119.   
  120.     -webkit-transition: all .5s ease;  
  121. transition: all .5s ease;  
  122. }  
  123.    

 


原文地址:http://www.freejs.net/article_biaodan_356.html