WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
एनिमेटेड
1256
ledoc
संपादक में खोलें
अपना कोड प्रकाशित करें
23 October 2024
वीएफएस डिजिटल डिजाइन एनिमेटेड टाइपफेस
19 October 2024
एनिमेटेड HTML और CSS इनपुट
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) */
