幽灵checkbox切换效果-html代码-BFW代码库

幽灵checkbox切换效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  width: 100%;
  height: 100%;
  background: black;
}

#boo {
  color: white;
  margin-bottom: 12px;
}

#boo.hide {
  opacity: 0;
}

.switch-container {
  width: 100%;
  height: 100vh;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 25px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: grey;
  transition: .4s;
}

input:checked + .slider {
  background-color: #EF4C45;
}

input:focus + .slider {
  box-shadow: 0 0 1px #EF4C45;
}

input:checked + .slider > div
{
  transform: translateX(65px);
}

input + .slider > div {
  transition: transform 0.4s;
}

.slider.round {
  border-radius: 34px;
}

.ghost {
  position: absolute;
  
  left:0;
  top: -10px;
  width: 40px;
  height: 40px;
  
  background-color: white;
  border-radius: 100px;
  
  animation: bobble 4.3s infinite;
  
  filter: drop-shadow(0px 5px 12px rgba(255, 255, 255, 0.6))
}

@keyframes bobble {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes sway {
  0% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(-2px);
  }
}

@keyframes sway-more {
  0% {
    transform: translateX(-4px);
  }
  50% {
    
    transform: translateX(4px);
  }
  100% {
    transform: translateX(-4px);
  }
}

@keyframes sway-left {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes sway-left-less {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0px);
  }
}


@keyframes sway-right {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(4px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes sway-right-less {
.........完整代码请登录后点击上方下载按钮下载查看