I love you

Open In Editor Video Publish Your Code

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

I love you

Recommended

Home Rent Car Landing Page

3D Login Signup Box HTML CSS Design

Personal Portafolio

HTML

CSS

JS

Recommended

Home Rent Car Landing Page

3D Login Signup Box HTML CSS Design

Personal Portafolio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS