wass Macht Dieser Code?
<!DOCTYPE html> <html> <head> <title>Zufällige Geschichte und Bananen-Animation</title> <style> .story { font-size: 20px; margin-bottom: 20px; } .banana { width: 100px; height: 200px; position: absolute; bottom: 0; left: 0; animation: eatCars 5s infinite linear; } .car { width: 50px; height: 30px; position: absolute; bottom: 0; animation: moveCar 5s infinite linear; } @keyframes eatCars { 0% { left: 0; } 100% { left: 100%; } } @keyframes moveCar { 0% { left: 0; } 100% { left: -50px; } } </style> </head> <body> <button onclick="getRandomStory()">Zufällige Geschichte</button> <button onclick="startBananaAnimation()">Banane füttern</button> <div class="story"></div> <div class="banana"></div> <div class="car"></div> <div class="car"></div> <div class="car"></div> <script> const stories = [ "Es war einmal...", "In einer weit entfernten Galaxie...", "Ein kleines Mädchen fand...", ]; function getRandomStory() { const storyElement = document.querySelector('.story'); const randomIndex = Math.floor(Math.random() * stories.length); storyElement.textContent = stories[randomIndex]; } function startBananaAnimation() { const banana = document.querySelector('.banana'); banana.style.display = 'block'; } </script> </body> </html>
Windows,
HTML,
Webseite,
CSS,
HTML5,
Code,
Programmiersprache,
Webdesign,
Webentwicklung,
Frontend
