1
好的，我已经创建了这个快速切换，只需更改图像。
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
}
.container {
height: 100%;
width: 100%;
display: grid;
place-items: center;
}
#checkbox {
display: none;
}
.toggle {
height: 80px;
width: 200px;
border-radius: 9999px;
background-image: url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80);
background-size: cover;
position: relative;
cursor: pointer;
transition: all 0.5s ease-in-out;
box-: 6px 6px 10px #000000;
}
#checkbox:checked + .toggle {
background-image: url(https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
background-size: cover;
}
.toggle::before {
content: "";
height: 80px;
width: 80px;
position: absolute;
left: 0;
border-radius: 50%;
background-color: #f4f4f4;
transition: all 0.5s ease-in-out;
}
#checkbox:checked + .toggle::before {
position: absolute;
left: calc(100% - 80px);
}<body>
<div class="container">
<div class="daynight">
<label for="checkbox">
<input type="checkbox" name="" id="checkbox">
<div class="toggle">
<div class="star1"></div>
<div class="star2"></div>
</div>
</label>
</div>
</div>
</body>本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（37条）