Bascule serpentine

999 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

7 November 2024

basculer avec animation lumineuse

21 June 2024

Bascule Ying Yang

HTML

CSS

body {
  display: grid;
  place-content: center;
  height: 100vh;
  background: #fa5b00;
}

#wrapper {
  position: relative;
  transform: scale(0.5) translate(25px, 140px);
  transition: 1s ease-in-out;
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out 1 forwards 1.25s;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
#wrapper:has(input:checked) {
  transform: scale(0.5) translate(-20px, -140px);
}
#wrapper:has(input:checked) #inner {
  transform: scaleY(-1) translate(0, -275px);
  transition-delay: 1.25s;
}
#wrapper #inner {
  width: auto;
  height: auto;
  transition: 0s linear 0s;
}
#wrapper div:not(#inner) {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #000;
  top: 0;
  left: 0;
  border-radius: 100%;
  offset-path: path("M 60 70 L 140 70 A 30 30 0 1 1 140 140 L 80 140 A 30 30 0 1 0 80 210 L 140 210 A 30 30 0 1 1 140 280 L 80 280 A 30 30 0 0 0 80 350 L 160 350 ");
  offset-distance: 0.25%;
  transition: offset-distance 1s ease-in-out, background 0.2s ease-in-out;
}
#wrapper input {
  position: absolute;
  z-index: 9;
  width: 35px;
  height: 35px;
  left: 45px;
  top: 52.5px;
  opacity: 0;
  cursor: pointer;
}
#wrapper input:hover ~ div:not(#inner) {
  background: #555;
}
#wrapper input:checked {
  top: auto;
  left: auto;
  right: 55px;
  bottom: 55px;
}
#wrapper input:checked ~ svg path {
  animation: drawInOut 1s ease-in-out 1 forwards;
}
@keyframes drawInOut {
  0% {
    stroke-dashoffset: 800px;
  }
  50% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: -725px;
  }
}
#wrapper input:checked ~ div:not(#inner) {
  offset-distance: 99.75%;
  transition-delay: 0.15s, 0s;
}

svg {
  min-width: 230px;
  min-height: 420px;
}
svg path {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-width: 70px;
  stroke-dasharray: 880px;
  stroke-dashoffset: 800px;
  transition: 1s ease-in-out;
  animation: drawOutIn 1s ease-in-out 1 forwards;
}
@keyframes drawOutIn {
  0% {
    stroke-dashoffset: -700px;
  }
  50% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: 825px;
  }
}
svg path:last-of-type {
  stroke: #fff;
  stroke-width: 40px;
}

Bascule serpentine

Recommandé

basculer avec animation lumineuse

Bascule dentée

Bascule Ying Yang

HTML

CSS

JS

Recommandé

basculer avec animation lumineuse

Bascule dentée

Bascule Ying Yang

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS