<!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>
