Created
August 6, 2025 07:44
-
-
Save trinhvanminh/9498c146657c70aaa7098d1532223659 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Morphing Blob</title> | |
| <style> | |
| body { | |
| background: #0f0f1a; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| .blob { | |
| width: 200px; | |
| height: 200px; | |
| background: linear-gradient(135deg, #4ef1d1, #7b6cf6); | |
| border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; | |
| animation: morph 8s ease-in-out infinite, float 4s ease-in-out infinite; | |
| box-shadow: 0 0 30px rgba(126, 255, 234, 0.4); | |
| } | |
| @keyframes morph { | |
| 0% { | |
| border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; | |
| } | |
| 25% { | |
| border-radius: 50% 50% 60% 40% / 30% 50% 70% 50%; | |
| } | |
| 50% { | |
| border-radius: 60% 40% 40% 60% / 50% 30% 50% 70%; | |
| } | |
| 75% { | |
| border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; | |
| } | |
| 100% { | |
| border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; | |
| } | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0) scale(1); | |
| } | |
| 50% { | |
| transform: translateY(-20px) scale(1.05); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="blob"></div> | |
| </body> | |
| </html> |
Author
trinhvanminh
commented
Aug 6, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment