WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated
1249
ledoc
Open In Editor
Publish Your Code
Recommended
8 May 2025
Animated spring
7 August 2024
Animated flowers
16 October 2025
CSS Animated Background & Loading Effects
HTML
Copy
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>animated element using css</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html>
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) */
