Webleb - Snippet di Codice -

HTML

CSS

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #514878;
  overflow: hidden;
}
.switch {
  position: relative;
}
.switch input {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 100;
  cursor: pointer;
}
.switch label {
  height: 110px;
  width: 220px;
  background-color: #39315a;
  border-radius: 100px;
  display: block;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2), inset 0 0 5px -2px rgba(0,0,0,0.4);
}
.switch label .bulb {
  height: 90px;
  width: 90px;
  background-color: #4a426b;
  border-radius: 50%;
  position: relative;
  top: 10px;
  left: 10px;
  display: block;
  transition: 0.7s;
  box-shadow: inset 0 0 1px 3px #4a426b, inset 0 0 6px 8px #423963, 0 20px 30px -10px rgba(0,0,0,0.4);
}
.switch label .bulb .bulb-center {
  position: absolute;
  display: block;
  height: 36px;
  width: 36px;
  background-color: #5a527b;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transition: 0.7s;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 4px #635a84;
}
.switch label .bulb .bulb-center:after {
  content: "";
  display: block;
  height: 14px;
  width: 14px;
  background-color: #7b7394;
  border-radius: 50%;
  position: absolute;
  transition: 0.7s;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 2px 4px #524a73;
}
.switch label .bulb .filament-1,
.switch label .bulb .filament-2 {
  position: absolute;
  display: block;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.switch label .bulb .filament-1:after,
.switch label .bulb .filament-2:after,
.switch label .bulb .filament-1:before,
.switch label .bulb .filament-2:before {
  content: "";
  display: block;
  height: 6px;
  width: 17px;
  border-radius: 50%;
  border: 2px solid #4a426b;
  position: absolute;
  transition: 0.7s;
  top: -4px;
  left: -2px;
  transform: rotate(-10deg);
}
.switch label .bulb .filament-1:before,
.switch label .bulb .filament-2:before {
  left: 15px;
  transform: rotate(10deg);
}
.switch label .bulb .filament-2 {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.reflections {
  height: 100%;
  width: 100%;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  z-index: 90;
  perspective: 70px;
}
.reflections span {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-image: linear-gradient(-135deg, transparent 10%, rgba(255,255,255,0.3));
  position: absolute;
  left: -40px;
  bottom: -45px;
}
.reflections span:after {
  content: "";
  display: block;
  height: 35px;
  width: 20px;
  position: absolute;
  top: -36px;
  right: -40px;
  border-radius: 50%;
  box-shadow: 4px -2px 0 -3px rgba(255,255,255,0.4);
  filter: blur(1px);
  transform: rotate(-10deg);
}
.reflections:after {
  content: "";
  display: block;
  height: 80px;
  width: 50px;
  background-image: linear-gradient(80deg, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.5));
  border-radius: 10% 20% 50% 30%/30% 60% 30% 40%;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotate(-35deg) skewx(-15deg) translate(10px, -20px);
  top: -8px;
  left: -5px;
}
.reflections:before {
  content: "";
  display: block;
  position: absolute;
  height: 10px;
  width: 30px;
  background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.15));
  bottom: 10px;
  right: 0px;
  transform: rotate(45deg);
}
.sparks .spark1 {
  display: block;
  height: 1px;
  width: 1px;
  background-color: #d1b82b;
  position: absolute;
  right: -5px;
  border-radius: 50%;
  bottom: 23px;
  transition: 0.4s;
  opacity: 0;
}
.sparks .spark2 {
  display: block;
  height: 3px;
  width: 3px;
  background-color: #d1b82b;
  position: absolute;
  right: 20px;
  border-radius: 50%;
  bottom: 80px;
  transition: 0.4s;
  opacity: 0;
}
.sparks .spark3 {
  display: block;
  height: 3px;
  width: 3px;
  background-color: #d1b82b;
  position: absolute;
  left: 20px;
  border-radius: 50%;
  bottom: 80px;
  transition: 0.4s;
  opacity: 0;
}
.sparks .spark4 {
  display: block;
  height: 3px;
  width: 3px;
  background-color: #d1b82b;
  position: absolute;
  left: 20px;
  border-radius: 50%;
  bottom: 20px;
  transition: 0.4s;
  opacity: 0;
}
.switch input:checked ~ label .bulb {
  left: 120px;
  background-color: #a7694a;
  box-shadow: inset 0 0 1px 3px #a56758, inset 0 0 6px 8px #6b454f, 0 20px 30px -10px rgba(0,0,0,0.4), 0 0 30px 50px rgba(253,184,67,0.1);
}
.switch input:checked ~ label .bulb > .bulb-center {
  background-color: #feed6b;
  box-shadow: inset 0 0 0 4px #fdec6a, 0 0 12px 10px #bca83c, 0 0 20px 14px #a1664a;
}
.switch input:checked ~ label .bulb > .bulb-center:after {
  background-color: #fef401;
  box-shadow: 0 0 2px 4px #fdb843;
}
.switch input:checked ~ label .bulb >.filament-1:before,
.switch input:checked ~ label .bulb >.filament-2:before,
.switch input:checked ~ label .bulb >.filament-1:after,
.switch input:checked ~ label .bulb >.filament-2:after {
  border-color: #fef4d5;
}
.switch input:checked ~ label .bulb > .sparks .spark1 {
  height: 1px;
  width: 1px;
  -webkit-animation: spark1 2s ease-in-out;
          animation: spark1 2s ease-in-out;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.switch input:checked ~ label .bulb > .sparks .spark2 {
  height: 1px;
  width: 1px;
  -webkit-animation: spark2 2.4s ease-in-out;
          animation: spark2 2.4s ease-in-out;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.switch input:checked ~ label .bulb > .sparks .spark3 {
  height: 1px;
  width: 1px;
  -webkit-animation: spark3 2s ease-in-out;
          animation: spark3 2s ease-in-out;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.switch input:checked ~ label .bulb > .sparks .spark4 {
  height: 1px;
  width: 1px;
  -webkit-animation: spark4 1.7s ease-in-out;
          animation: spark4 1.7s ease-in-out;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes spark1 {
  0% {
    right: -5px;
    height: 1px;
    width: 1px;
    opacity: 0;
  }
  20% {
    height: 3px;
    width: 3px;
    right: 0px;
    opacity: 1;
  }
  30% {
    right: -5px;
    opacity: 1;
    height: 3px;
    width: 3px;
  }
  70% {
    height: 3px;
    width: 3px;
  }
  100% {
    right: -60px;
    bottom: 40px;
    opacity: 0;
  }
}
@keyframes spark1 {
  0% {
    right: -5px;
    height: 1px;
    width: 1px;
    opacity: 0;
  }
  20% {
    height: 3px;
    width: 3px;
    right: 0px;
    opacity: 1;
  }
  30% {
    right: -5px;
    opacity: 1;
    height: 3px;
    width: 3px;
  }
  70% {
    height: 3px;
    width: 3px;
  }
  100% {
    right: -60px;
    bottom: 40px;
    opacity: 0;
  }
}
@-webkit-keyframes spark2 {
  0% {
    height: 3px;
    width: 3px;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    right: -20px;
    bottom: 100px;
    opacity: 0;
  }
}
@keyframes spark2 {
  0% {
    height: 3px;
    width: 3px;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    right: -20px;
    bottom: 100px;
    opacity: 0;
  }
}
@-webkit-keyframes spark3 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
    height: 2px;
    width: 2px;
  }
  100% {
    left: 0px;
    bottom: 100px;
    opacity: 0;
    height: 3px;
    width: 3px;
  }
}
@keyframes spark3 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
    height: 2px;
    width: 2px;
  }
  100% {
    left: 0px;
    bottom: 100px;
    opacity: 0;
    height: 3px;
    width: 3px;
  }
}
@-webkit-keyframes spark4 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
    height: 2px;
    width: 2px;
  }
  100% {
    left: -20px;
    bottom: -10px;
    opacity: 0;
    height: 3px;
    width: 3px;
  }
}
@keyframes spark4 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
    height: 2px;
    width: 2px;
  }
  100% {
    left: -20px;
    bottom: -10px;
    opacity: 0;
    height: 3px;
    width: 3px;
  }
}

Consigliato

Un codice di Liamgilles76

Esempio di contenitore di animazione CSS

Un codice di staticcloud996

HTML

CSS

JS

Consigliato

Un codice di Liamgilles76

Esempio di contenitore di animazione CSS

Un codice di staticcloud996

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS