WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animato
1245
ledoc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
23 October 2024
Carattere animato VFS Digital Design
7 March 2025
Modulo di accesso animato
5 October 2024
Input HTML animato
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) */