Webleb - Snippets de Código -

2073 Andev.web

Abrir no Editor Publique Seu Código

Recomendado

12 April 2025

Um Código de Farah

23 October 2025

Ocultar div, iniciar animação ao clicar no botão

21 May 2025

Página de destino do portfólio

HTML

CSS

@property --flap-rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

@property --text {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.0;
}

* {
  box-sizing: border-box;
}

body {
  height: 1000vh;
}
.text-to-show {
  animation: reveal-text ease both;
  animation-timeline: scroll();
  animation-range: 80%;
  opacity: var(--text);
}
.envelope {
  container: envelope / inline-size;
  perspective: 1000px;
}

.flap {
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
	width: 100cqw;
	height: 30cqw;
  transform-style: preserve-3d;
  rotate: x var(--flap-rotation);
  transform-origin: 50% 0;
  animation: animate-flap ease both;
  animation-timeline: scroll();
  animation-range: 0 60%;
  z-index: 4;
  position: relative;
}

.face {
  clip-path: polygon(50% 35%, 100% 0, 100% 100%, 0 100%, 0 0);
}

.heart {
  --c: red;
  position: absolute;
  width: 50cqw;
  left: 50%;
  top: 0;
  transform: translateY(var(--progress));
  animation: show-heart ease both;
  animation-timeline: scroll();
  animation-range: 60%;
  margin-left: -25cqw;
  aspect-ratio: 1/1;
      z-index: 3;
  background:

radial-gradient(at 70% 31%,var(--c) 29%,#0000 30%),
   radial-gradient(at 30% 31%,var(--c) 29%,#0000 30%),
   conic-gradient(from -45deg at 50% 84%,var(--c) 90deg,#0000 0) 
    bottom/100% 50% no-repeat;
}

@keyframes animate-flap {
  from {
    --flap-rotation: 0deg;
  }
  99% {
    z-index: 4
  }
  100% {
    --flap-rotation: 180deg;
    z-index: 1;
  }
}

@keyframes show-heart {
  from {
    --progress: 20%;
  }
  to {
    --progress: -90%;
  }
}

@keyframes reveal-text {
  from {
    --text: 0.0;
  }
  
  to {
    --text: 1.0;
  }
}

Recomendado

Um Código de Farah

Ocultar div, iniciar animação ao clicar no botão

Página de destino do portfólio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS