web前端开发 html css 实战：白天黑夜开关

by 前端开发者 · Published 2018年5月14日20:10:44 · Updated 2018年5月14日19:37:52

摘要：web前端开发 html css 实战|前端开发者 checkbox进行切换 html 代码 <!doctype html> <html> <head> <meta charset=”utf-8″><br /&g……

web前端开发 html css 实战|前端开发者

checkbox进行切换
html 代码

<!doctype <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a>> <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>

web前端开发 html css 实战|前端开发者

https://www.rokub.com

» 本文来自：前端开发者 » 《web前端开发 html css 实战：白天黑夜开关》

» 本文链接地址：https://www.rokub.com/2768.html

» 您也可以订阅本站：https://www.rokub.com