开关制作源代码 

 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>

 

posted @ 2019-01-12 15:34  元哥0317  阅读(293)  评论(0)  编辑  收藏  举报