Je t'aime

2072 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 May 2024

Ancien projet...nouvelles vibrations

26 May 2025

Je ne sais pas

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;
  }
}

Je t'aime

Recommandé

Jeu de serpent

Ancien projet...nouvelles vibrations

Je ne sais pas

HTML

CSS

JS

Recommandé

Jeu de serpent

Ancien projet...nouvelles vibrations

Je ne sais pas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS