मुझे तुमसे प्यार है

1585 Andev.web

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

26 May 2025

हैकर लॉगिन

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

मुझे तुमसे प्यार है

अनुशंसित

मुझें नहीं पता

यहाँ लिसा है

हैकर लॉगिन

HTML

CSS

JS

अनुशंसित

मुझें नहीं पता

यहाँ लिसा है

हैकर लॉगिन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS