前端开发者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
}
</p><p>#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/2768.html
» 您也可以订阅本站：https://www.rokub.com
Satisfy 4个月前 (06-04)说：
Pitt 4个月前 (06-03)说：
评论前必须登录！
注册