<!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>
以上是使用 html css js 的线圈错觉的详细内容。更多信息请关注PHP中文网其他相关文章！
