html - 如何防止切换复选框元素与另一个元素重叠？

标签 html css animation checkbox switch-statement

想在我的页面上放置树开关。开关是基于复选框的，当我尝试添加更多时，它们会保持一个在另一个之上。这是我的 fiddle 代码:https://jsfiddle.net/kdh8zyo0/

我想要做的就是在另一个上方(而不是上方)添加更多两个开关。喜欢:

Switch 1

Switch 2

Switch 3

完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head> 
<style>
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #179b77;
}

.colorful-switch {
  display: block;	
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 120px;
  margin-left: -140px;
  margin-top: -60px;
  border-radius: 50px;
  background: #000000;
}
.colorful-switch:before {
  content: "";
  z-index: -1;
  position: absolute;
  left: -5px;
  top: -5px;
  width: 290px;
  height: 130px;
  border-radius: 55px;
  /* 			COR DA BORDA */
  background: #000000;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.colorful-switch:hover:before {
/* 			COR DA BORDA hover */
  background: #13232f;
}
.colorful-switch__checkbox {
	z-index: -10;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}
.colorful-switch__label {
  z-index: 1;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  cursor: pointer;
}
.colorful-switch__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 840px;
  height: 100%;
  
 /* background: -webkit-linear-gradient(0deg, #ffffff 0, #ffffff 280px, #ffffff 560px, #ffffff  100%);*/
  
  background: linear-gradient(120deg, #179b77 0, #33FF99 280px, #FF3300 560px, #ff0000  	100%);
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(-560px, 0, 0);
          transform: translate3d(-560px, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__dot {
  position: absolute;
  left: 204px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot {
  -webkit-transform: translate3d(-125px, 0, 0);
          transform: translate3d(-125px, 0, 0);
}
.colorful-switch__on {
  position: absolute;
  left: 177px;
  top: 35px;
  width: 30px;
  height: 56px;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on {
  -webkit-transform: translate3d(-125px, 0, 0);
          transform: translate3d(-125px, 0, 0);
}
.colorful-switch__on__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28), -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: rotate(45deg) scale(0) translateZ(0);
          transform: rotate(45deg) scale(0) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner {
  -webkit-transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61), -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  -webkit-transform: rotate(45deg) scale(1) translateZ(0);
          transform: rotate(45deg) scale(1) translateZ(0);
}
.colorful-switch__on__inner:before, .colorful-switch__on__inner:after {
  content: "";
  position: absolute;
  border-radius: 4px;
  background: #ffffff;
}
.colorful-switch__on__inner:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 9px;
}
.colorful-switch__on__inner:after {
  right: 0;
  top: 0;
  width: 9px;
  height: 100%;
}
.colorful-switch__off {
  position: absolute;
  left: 204px;
  top: 50%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off {
  -webkit-transform: translate3d(-125px, 0, 0);
          transform: translate3d(-125px, 0, 0);
}
.colorful-switch__off:before, .colorful-switch__off:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 8px;
  margin-top: -4px;
  border-radius: 4px;
  background: #ffffff;
  -webkit-transition: -webkit-transform 0.25s 0.25s;
  transition: -webkit-transform 0.25s 0.25s;
  transition: transform 0.25s 0.25s;
  transition: transform 0.25s 0.25s, -webkit-transform 0.25s 0.25s;
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.colorful-switch__off:before {
  -webkit-transform: rotate(45deg) scaleX(1) translateZ(0);
          transform: rotate(45deg) scaleX(1) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before {
  -webkit-transform: rotate(45deg) scaleX(0) translateZ(0);
          transform: rotate(45deg) scaleX(0) translateZ(0);
}
.colorful-switch__off:after {
  -webkit-transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
          transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
  -webkit-transform: rotate(-45deg) scaleX(1) translateZ(0);
          transform: rotate(-45deg) scaleX(1) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transform: rotate(-45deg) scaleX(0) translateZ(0);
          transform: rotate(-45deg) scaleX(0) translateZ(0);
}

</style>  
<body>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="200px">Room</font>
	
    
    
    <div class="colorful-switch" >
        <input type="checkbox" style=" position: relative;
    top: 20px;" class="colorful-switch__checkbox" id="cozinha"/>
          <label class="colorful-switch__label" for="cozinha">
            <span class="colorful-switch__bg" ></span>
            <span class="colorful-switch__dot" ></span>
            <span class="colorful-switch__on">
              <span class="colorful-switch__on__inner" ></span>
            </span>
            <span  class="colorful-switch__off"></span>
          </label>
        </div>  
    
         
         
    


</body>
</html>

最佳答案

它们位于彼此之上，因为位置已在 css 中定义。您需要删除:

left: 50%;
top: 50%;

来自 .colorful-switch 并在别处定义值或为每个按钮设置不同的 css 类。

这将是每个按钮位置都有单独的 css 的示例:https://jsfiddle.net/d6LaLgLk/

或:https://jsfiddle.net/d6LaLgLk/1/它使用 px 而不是 %

关于html - 如何防止切换复选框元素与另一个元素重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38947087/

上一篇：html - 具有相对高度的元素在滚动时改变高度/跳跃(移动)

下一篇：html - 嵌套层次结构 CSS 问题

相关文章：

html - 如何从细节元素中删除元素符号？

html - 为什么看不到我写的

在交互式 shell 中运行时与 pygame 一起使用时，Python.exe 没有响应

javascript - 如何隐藏元素，然后在单击包含它们的 DIV 时显示它们

javascript - getElementById() 在第一个元素上返回 null

javascript - 图像上传和预览选项，代码不允许显示不同的图像

javascript - 寻找一种在 HTML 中卡住表格行和列的方法

html - 转换规模和定位问题

html - Bootstrap 轮播控件不反射(reflect)样式

animation - 使用 react-native 动画 blurRadius 属性

©2024 IT工具网  联系我们