WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
समारोह में झांकना
392
ByBy.inc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
15 October 2024
पेज के बारे में
18 September 2025
सीएसएस एनिमेशन: घोस्ट मेमोरी फ़्रैगमेंट प्रभाव
16 November 2024
CSS में ग्रिड साइडबार कैसे बनाएं
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .animation-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background-color: #000; } /* Animação Function */ .function-box { width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(to bottom right, #F0C30F, #66D9EF); position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } .function-box::after { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(to top right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); border-radius: 50%; opacity: 0; animation: radial-expand-out 1s ease infinite alternate; } @keyframes radial-expand-out { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1.2); } } .function-input { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: none; color: #fff; font-size: 16px; padding: 5px 10px; border-radius: 3px; user-select: none; animation: input-wiggle 1s ease-in-out infinite alternate; } @keyframes input-wiggle { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, 2px); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */