checkbox 进行切换
html 代码
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title > 无标题文档 </title>
- </head>
- <style>
- html, body { height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; }
- * { transition: all 1s ease }
- input[type=checkbox] { display: none }
- input[type=checkbox] + label { background-color: #040d1c; width: 200px; height: 80px; border-radius: 50px; display: block; padding: 10px; box-shadow: inset 5px 5px 20px rgba(0,0,0,0.5); z-index: 5; position: absolute; top: calc(50% - 50px); left: calc(50% - 80px); cursor: pointer; )
- }
- input[ type=checkbox] + label + section { width: 100%; height: 100%; position: absolute; background-color: #0f1f3a; z-index: -1 }
- #a { width: 80px; height: 80px; border-radius: 100px; background-color: #f0f0f0; box-shadow: 0 0 100px rgba(255,255,255,1) }
- input[ type=checkbox]:checked + label + section { background-color: #568eef; }
- input[ type=checkbox]:checked + label { background-color: #2a5fba; }
- input[ type=checkbox]:checked + label #a { margin-left: calc(100% - 80px); background: #f4e94e; box-shadow: 0 0 100px rgba(249, 240, 104,1) }
- </style>
- <body>
- <input type="checkbox" id="c" />
- <label for="c">
- <div id="a">
- </div>
- </label>
- <section>
- </section>
- </body>
- </html>
来源: http://www.qdfuns.com/article/32318/5b89e64a62aa8247c04d00c832a044b3.html