开关制作源代码
Posted liufuyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了开关制作源代码相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 label{ 9 display: block; 10 width:160px; 11 height:80px; 12 background:#ccc; 13 margin:100px auto; 14 border-radius: 40px; 15 position: relative; 16 } 17 label span{ 18 display: block; 19 width:80px; 20 height:80px; 21 border-radius: 50%; 22 background:#000; 23 position: absolute; 24 left:0;top:0; 25 transition:1s; 26 } 27 input{ 28 display: none; 29 } 30 input:checked+label{ 31 background:red; 32 } 33 input:checked+label span{ 34 left:80px; 35 background: green; 36 } 37 </style> 38 </head> 39 <body> 40 <form action="" method="post"> 41 <input type="radio" name="" id="labtext" value="" /> 42 <label for="labtext"><span></span></label> 43 </form> 44 </body> 45 </html>
以上是关于开关制作源代码的主要内容，如果未能解决你的问题，请参考以下文章