Heim >Web-Frontend >js-Tutorial >Spulenillusion mit HTML, CSS, JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Concentric Circle Coil Animation</title> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000000; /* Black background for contrast */ } .coil-container { position: relative; width: 300px; height: 300px; } .coil-circle { position: absolute; border: 2px solid white; /* White circles */ border-radius: 50%; opacity: 0; /* Start invisible */ animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(0); /* Start small */ opacity: 0; /* Fade out */ } 50% { transform: scale(1); /* Scale to full size */ opacity: 1; /* Fade in */ } } </style> </head> <body> <div class="coil-container"></div> <script> const container = document.querySelector('.coil-container'); const numberOfCircles = 20; // Number of concentric circles const baseSize = 30; // Base size for the smallest circle // Create concentric circles for (let i = 0; i < numberOfCircles; i++) { const circle = document.createElement('div'); circle.classList.add('coil-circle'); const size = baseSize + i * 20; // Increase size for each circle circle.style.width = `${size}px`; circle.style.height = `${size}px`; circle.style.top = `50%`; circle.style.left = `50%`; circle.style.marginTop = `-${size / 2}px`; // Center vertically circle.style.marginLeft = `-${size / 2}px`; // Center horizontally circle.style.animationDelay = `${i * 0.2}s`; // Stagger animation container.appendChild(circle); } </script> </body> </html>
Das obige ist der detaillierte Inhalt vonSpulenillusion mit HTML, CSS, JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!