WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
एनिमेटेड
1763
ledoc
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
0
अनुशंसित
1 June 2025
एनिमेटेड वेन आरेख
19 November 2025
CSS स्टाइलिंग के साथ एनिमेटेड HTML रजिस्टर फ़ॉर्म
27 December 2025
GSAP के साथ HTML एनिमेटेड प्रेम पत्र लिफाफा
HTML
Copy
animated element using css
CSS
Copy
body { margin: 0; overflow: hidden; background: #eef2f5; } .container { display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 1000px; } .box { width: 250px; height: 250px; background-image: url(img/1.jpg); background-size: cover; background-position: center center; border-radius: 50%; position: relative; animation: moveRotate 5s ease-in-out infinite, imgChange 3s alternate infinite; transform-style: preserve-3d; border: 20px ridge #fff; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } @keyframes moveRotate { 0%, 100% { transform: translateX(0) rotateY(0deg) rotateX(0deg); } 25% { transform: translateX(200px) rotateY(90deg) rotateX(90deg); } 50% { transform: translateX(0) rotateY(180deg) rotateX(180deg); } 75% { transform: translateX(-200px) rotateY(270deg) rotateX(270deg); } } @keyframes imgChange { 0%, 100% { background-image: url(img/1.jpg); } 50% { background-image: url(img/2.jpg); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */