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

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

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

Example

感谢您的任何帮助

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

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

(569)
当播放器不可见时 使用HTML5嵌入标签自动播放音频
上一篇
服务器以“image/png”的MIME类型响应-HTML/JavaScript
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(29条)