css3制作滚动按钮
浏览数：34 /
时间：2015年06月09日
1，中间圆点用到css3的gradient属性
2，运动用到css3的transition属性
3，需要写各个浏览器的兼容
代码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3按钮</title> 6 </head> 7 <style type="text/css"> 8 .btn{ 9 width: 100px; 10 height: 30px; 11 background: orange; 12 border-radius: 20px; 13 position: relative; 14 15 } 16 .btn input{ 17 width:100%; 18 height: 100%; 19 opacity: 0; 20 cursor: pointer; 21 } 22 .btn label{ 23 display: block; 24 width: 20px; 25 height: 20px; 26 background: -webkit-linear-gradient(top,#fff,#ccc); 27 background: -moz-linear-gradient(top,#fff,#ccc); 28 background: -ms-linear-gradient(top,#fff,#ccc); 29 background: -o-linear-gradient(top,#fff,#ccc); 30 position: absolute; 31 left: 10px; 32 top:5px; 33 -webkit-transition:all .2s linear; 34 -moz-transition:all .2s linear; 35 -ms-transition:all .2s linear; 36 -o-transition:all .2s linear; 37 transition:all .2s linear; 38 cursor: pointer; 39 border-radius: 50%; 40 } 41 .btn input:checked+label{ 42 left: 70px; 43 } 44 </style> 45 <body> 46 <div class="btn"> 47 <input type="checkbox" id="forbtn"> 48 <label for="forbtn"></label> 49 </div> 50 </body> 51 </html>
.btn input:checked+label表示在input选中的时候它后面的label标签定义样式。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
