![[The AI Show Episode 142]: ChatGPT’s New Image Generator, Studio Ghibli Craze and Backlash, Gemini 2.5, OpenAI Academy, 4o Updates, Vibe Marketing & xAI Acquires X](https://www.marketingaiinstitute.com/hubfs/ep%20142%20cover.png)
![[DEALS] The Premium Learn to Code Certification Bundle (97% off) & Other Deals Up To 98% Off – Offers End Soon!](https://www.javacodegeeks.com/wp-content/uploads/2012/12/jcg-logo.jpg){kind=logo}
![From drop-out to software architect with Jason Lengstorf [Podcast #167]](https://cdn.hashnode.com/res/hashnode/image/upload/v1743796461357/f3d19cd7-e6f5-4d7c-8bfc-eb974bc8da68.png?#)
.png?#)
_Christophe_Coat_Alamy.jpg?#)
.webp?#)
![Apple Considers Delaying Smart Home Hub Until 2026 [Gurman]](https://www.iclarified.com/images/news/96946/96946/96946-640.jpg)
![iPhone 17 Pro Won't Feature Two-Toned Back [Gurman]](https://www.iclarified.com/images/news/96944/96944/96944-640.jpg)
![Tariffs Threaten Apple's $999 iPhone Price Point in the U.S. [Gurman]](https://www.iclarified.com/images/news/96943/96943/96943-640.jpg)
Valentine Week Love animation using the html ,css and javascript coding
Follow us on the instagram please Full code is : Valentine's Week Surprise * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #ffccd5, #ffe6f0); overflow: hidden; font-family: Arial, sans-serif; } .mail-wrapper { position: relative; width: 220px; height: 160px; background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 2; animation: tiltBounce 2s infinite ease-in-out; transition: opacity 0.5s ease-in-out, transform 0.3s ease-in-out; } .mail-wrapper:hover { animation: none; /* Stop tilting on hover */ transform: scale(1.05); /* Slight zoom on hover */ } .mail-wrapper.hide { opacity: 0; } @keyframes tiltBounce { 0% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .mail-wrapper::before { content: ""; position: absolute; top: 0; transform: rotate(180deg); width: 210px; height: 60px; background: #e74c3c; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .heart { font-size: 50px; transition: transform 0.3s ease-in-out; } .mail-wrapper:hover .heart { transform: scale(1.2); } .letter { position: absolute; padding: 8px; bottom: -160px; width: 200px; height: 200px; background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(0); transition: transform 0.8s ease-in-out, opacity 0.5s ease-in-out; opacity: 0; z-index: 1; /* Appear behind the mail wrapper */ } .letter.show { position: absolute; top:400px; transform: translateY(-180px); /* Move up from behind the mail */ opacity: 1; z-index: 3; /* Bring above the mail wrapper */ } .letter h2 { font-family: 'Brush Script MT', cursive; color: #e74c3c; font-size: 24px; } .letter p { font-size: 14px; color: #444; text-align: center; padding: 5px; } .letter .small-hearts { display: flex; gap: 5px; margin-top: 5px; } .letter .small-hearts span { font-size: 20px; } .heart-rain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .heart-rain span { position: absolute; bottom: 100%; font-size: 24px; opacity: 0.9; animation: fall linear infinite; } @keyframes fall { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }
Follow us on the instagram please
Full code is :
Valentine's Week Surprise
