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><br /> <html><br /> <head><br /> <meta charset=”utf-8″><br /&g…… web前端开发 html css 实战|前端开发者 checkbox进行切换 html 代码 <!doctype <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html">html</a></span>><br /><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html">html</a></span>><br /><br /> <head><br /><br /> <meta charset=”utf-8″><br /><br /> <title>无标题文档</title><br /><br /> </head><br /><br /> <style><br /><br /> <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html">html</a></span>, body { height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; }<br /><br /> * { transition: all 1s ease }<br /><br /> input[type=checkbox] { display: none }<br /><br /> 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; )<br /><br /> }<br /><br /> input[ type=checkbox] + label + section { width: 100%; height: 100%; position: absolute; background-color: #0f1f3a; z-index: -1 }</p><br /> <p>#a { width: 80px; height: 80px; border-radius: 100px; background-color: #f0f0f0; box-shadow: 0 0 100px rgba(255,255,255,1) }<br /><br /> input[ type=checkbox]:checked + label + section { background-color: #568eef; }<br /><br /> input[ type=checkbox]:checked + label { background-color: #2a5fba; }<br /><br /> input[ type=checkbox]:checked + label #a { margin-left: calc(100% – 80px); background: #f4e94e; box-shadow: 0 0 100px rgba(249, 240, 104,1) }<br /><br /> </style><br /><br /> <body><br /><br /> <input type=”checkbox” id=”c” /><br /><br /> <label for=”c”><br /><br /> <div id=”a”><br /><br /> </div><br /><br /> </label><br /><br /> <section><br /><br /> </section><br /><br /> </body><br /><br /> </html> web前端开发 html css 实战|前端开发者 https://www.rokub.com Share
0 前端开发调试方法基本技巧 2018年5月21日20:00:58 by 前端开发者 · Published 2018年5月21日20:00:58 · Last modified 2018年5月21日20:23:20
0 前端开发环境gulp菜鸟级零基础详细教程 2018年5月17日21:55:47 by 前端开发者 · Published 2018年5月17日21:55:47 · Last modified 2018年5月20日00:39:17
0 Hey async, await me|网站前端开发_前端开发者 2018年5月1日10:18:11 by 前端开发者 · Published 2018年5月1日10:18:11 · Last modified 2018年5月21日17:52:13
近期评论