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

2327 Andev.web

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

अनुशंसित

18 September 2024

हैकर लॉगिन (अपडेट) तुर्की संस्करण

13 June 2025

अंडा टोस्टिंग लोड हो रहा है

29 December 2024

प्रकृति से प्यार करें और उसका सम्मान करें

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

अनुशंसित

हैकर लॉगिन (अपडेट) तुर्की संस्करण

अंडा टोस्टिंग लोड हो रहा है

प्रकृति से प्यार करें और उसका सम्मान करें

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS