Untitled
unknown
plain_text
a year ago
2.1 kB
3
Indexable
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { display: flex; height: 100vh; margin: 0; background-color: #f0f0f0; } .greeting-card { position: relative; width: 300px; height: 300px; background-color: red; animation: movePicture 10s infinite; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; object-fit: cover; animation: changeColor 10s infinite; } @keyframes movePicture { 0% { left: 0; top: 0; background-color: red; } 25% { left: calc(100% - 200px); top: 0; background-color: green; } 50% { left: calc(100% - 200px); top: calc(100% - 200px); background-color: orange; } 75% { left: 0; top: calc(100% - 200px); background-color: purple; } 100% { left: 0; top: 0; background-color: red; } } @keyframes changeColor { 0% { background-color: red; } 25% { background-color: green; } 50% { background-color: orange; } 75% { background-color: purple; } 100% { background-color: red; } } </style> </head> <body> <div class="greeting-card"> <p id="message">Click me!</p> <img src="C:\Users\student\Downloads\download.jpg" alt="Greeting Card Image"> </div> <script> const card = document.querySelector('.greeting-card'); card.style.left = '0'; card.style.top = '0'; const message = document.getElementById('message'); let clickCount = 0; card.addEventListener('click', () => { clickCount++; if (clickCount % 4 === 1) { message.textContent = "Hello!"; } else if (clickCount % 4 === 2) { message.textContent = "Bonjour!"; } else if (clickCount % 4 === 3) { message.textContent = "Hola!"; } else { message.textContent = "Ciao!"; } }); </script> </body> </html>
Editor is loading...
Leave a Comment