WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML छवि ऑब्जेक्ट एनीमेशन कंटेनर
581
byby.createsite
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
15 July 2025
CSS त्रिभुज टॉगल एनीमेशन
8 September 2025
CSS फ़ोकस पॉइंट एनीमेशन स्निपेट
1 July 2025
सुडोकू गेम HTML: साइडबार टॉगल और मेनू
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #242b38; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #CC3636; } .property { color: #6effe7; } .value-number { color: #aaccff; } .value-string { color: #b4cc88; } .value-color { color: #79cc8f; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #79cc8f; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background: transparent; } /* --------------------- CSS CODE TO BE EMBEDDED --------------------- */ .animation-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; } .object { width: 150px; height: 150px; border-radius: 50%; border: 5px solid #FFF; box-shadow: 0 8px 16px rgba(0,0,0, 0.4); overflow: hidden; position: relative; animation: blur_fade 2s infinite ease-in-out alternate; } .object::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("//www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");/* Example: blurred logo */ background-size: contain; background-repeat: no-repeat; filter: blur(10px); animation: blur_shift 2s infinite linear alternate; } .object img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); animation: pixelate_reveal 2s infinite linear; } /* Anims */ @keyframes blur_fade { 0% { filter: blur(5px); opacity: 1; } 50% { filter: blur(10px); opacity: 0.5; } 100% { filter: blur(5px); opacity: 1; } } @keyframes blur_shift { 0% { background-position: 0% -8px; } 50% { background-position: 50% -8px; } 100% {background-position: 100% -8px; } } @keyframes pixelate_reveal { from { transform: scale(0); filter: blur(0) } to { transform: scale(1); filter: blur(4px) } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */