代码实现一个不停发出不同光的球

在前端开发中，你可以使用HTML、CSS和JavaScript来创建一个不停发出不同光的球。下面是一个简单的示例代码，演示如何实现这个效果：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发光球</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="ball"></div>
    <script src="script.js"></script>
</body>
</html>

CSS代码（styles.css）：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
}

.ball {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 50%;
    animation: glow 2s infinite;
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff0000, 0 0 25px #ff0000, 0 0 30px #ff0000, 0 0 35px #ff0000;
    }
    50% {
        box-shadow: 0 0 5px #fff, 0 0 10px #ff0000, 0 0 15px #ff0000, 0 0 20px #00ff00, 0 0 25px #00ff00, 0 0 30px #00ff00, 0 0 35px #00ff00;
    }
}

JavaScript代码（script.js）：（可选，如果你想通过JavaScript动态改变发光颜色）

const ball = document.querySelector('.ball');
let hue = 0;

function updateBallColor() {
    hue = (hue + 1) % 360;
    const color = `hsl(${hue}, 100%, 50%)`;
    ball.style.boxShadow = `0 0 5px ${color}, 0 0 10px ${color}, 0 0 15px ${color}, 0 0 20px ${color}, 0 0 25px ${color}, 0 0 30px ${color}, 0 0 35px ${color}`;
}

setInterval(updateBallColor, 1000); // 每秒更新一次颜色

这个示例中，我们使用了CSS的@keyframes和animation属性来创建一个名为glow的动画，该动画会使球体发出不同颜色的光。在CSS代码中，我们定义了动画的起始状态（0%和100%）和中间状态（50%），并设置了不同的box-shadow值来模拟发光效果。你可以根据需要调整这些值来达到你想要的效果。

如果你想通过JavaScript动态改变发光颜色，你可以在JavaScript代码中使用setInterval函数来定期更新球体的颜色。在这个示例中，我们使用了HSL颜色模式，并通过递增色相值来改变颜色。你可以根据需要调整这部分代码来实现不同的颜色变化效果。

posted @ 2024-12-19 06:19  王铁柱6  阅读(40)  评论(0)    收藏  举报