代码实现一个不停发出不同光的球-编程知识

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

news/2024/12/19 6:21:07/文章来源:https://www.cnblogs.com/ai888/p/18616197

在前端开发中，你可以使用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颜色模式，并通过递增色相值来改变颜色。你可以根据需要调整这部分代码来实现不同的颜色变化效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/855189.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！