如何在htmlcss中创建带有图像的切换开关 -码文网

如何做一个切换开关的图像，如下面的例子？

感谢您的任何帮助

好的，我已经创建了这个快速切换，只需更改图像。

*,
*::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-shadow: 6px 6px 10px #0000003d;
}
#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 cl="container">
   <div cl="daynight">
     <label  for="checkbox">
      <input type="checkbox" name="" id="checkbox">
       <div cl="toggle">
         <div cl="star1"></div>
         <div cl="star2"></div>
       </div>
     </label>
   </div>
 </div>
</body>

本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处