css3制作滚动按钮
生活随笔
收集整理的這篇文章主要介紹了
css3制作滚动按钮
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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標簽定義樣式。轉載于:https://www.cnblogs.com/MissBean/p/4234342.html
總結
以上是生活随笔為你收集整理的css3制作滚动按钮的全部內容，希望文章能夠幫你解決所遇到的問題。
