JavaScript 中实现发光效果通常是通过 CSS 和 JavaScript 结合的方式,使用 CSS 的 box-shadow
属性来创建发光效果,然后通过 JavaScript 来动态改变这些属性。下面是一个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发光效果</title>
<style>
.glow {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 50%;
transition: box-shadow 0.3s ease;
}
</style>
</head>
<body>
<div class="glow" id="glowElement"></div>
<script src="script.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', function() {
const glowElement = document.getElementById('glowElement');
glowElement.addEventListener('mouseover', function() {
this.style.boxShadow = '0 0 20px #3498db, 0 0 30px #3498db, 0 0 40px #3498db';
});
glowElement.addEventListener('mouseout', function() {
this.style.boxShadow = '';
});
});
div
元素,用于展示发光效果。.glow
类,设置了元素的基本样式,并且有一个过渡效果,使得发光效果更加平滑。box-shadow
属性来增加发光效果;当鼠标移开时,移除发光效果。requestAnimationFrame
来优化动画效果。为了提高性能,可以使用 requestAnimationFrame
来平滑动画效果:
glowElement.addEventListener('mouseover', function() {
let intensity = 0;
const glow = () => {
intensity += 1;
this.style.boxShadow = `0 0 ${intensity * 5}px #3498db`;
if (intensity < 20) {
requestAnimationFrame(glow);
}
};
glow();
});
glowElement.addEventListener('mouseout', function() {
this.style.boxShadow = '';
});
这样,发光效果会更加平滑且性能更好。