炫酷发光特效

原创已于 2025-06-27 13:56:30 修改 · 274 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-27 15:21:07 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷发光特效</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Arial', sans-serif;
}

.glow-container {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}

.glow-text {
color: #fff;
font-size: 32px;
font-weight: bold;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #e60073,
0 0 40px #e60073,
0 0 50px #e60073,
0 0 60px #e60073,
0 0 70px #e60073;
animation: glow 1.5s ease-in-out infinite alternate;
text-align: center;
}

@keyframes glow {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #e60073,
0 0 40px #e60073,
0 0 50px #e60073,
0 0 60px #e60073,
0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff,
0 0 30px #ff4da6,
0 0 40px #ff4da6,
0 0 50px #ff4da6,
0 0 60px #ff4da6,
0 0 70px #ff4da6,
0 0 80px #ff4da6;
}
}

.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.particle {
position: absolute;
width: 5px;
height: 5px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: float 15s infinite linear;
}

@keyframes float {
0% {
transform: translateY(0) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) translateX(100px);
opacity: 0;
}
}

.link {
position: absolute;
bottom: 20px;
color: #fff;
font-size: 14px;
text-decoration: none;
transition: all 0.3s;
}

.link:hover {
color: #e60073;
text-shadow: 0 0 10px #e60073;
}
</style>
</head>
<body>
<div class="glow-container">
<div class="particles" id="particles"></div>
<div class="glow-text">
炫酷发光特效<br>
<span style="font-size: 16px;">HTML/CSS实现</span>
</div>
</div>


<script>
// 创建粒子效果
const particlesContainer = document.getElementById('particles');
const particleCount = 50;

for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');

// 随机位置
const posX = Math.random() * 100;
const posY = Math.random() * 100 + 100;

// 随机大小
const size = Math.random() * 3 + 2;

// 随机动画延迟
const delay = Math.random() * 15;

// 随机透明度
const opacity = Math.random() * 0.5 + 0.3;

particle.style.left = `${posX}%`;
particle.style.top = `${posY}%`;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.animationDelay = `${delay}s`;
particle.style.opacity = opacity;

particlesContainer.appendChild(particle);
}

// 鼠标移动效果
document.addEventListener('mousemove', (e) => {
const glowText = document.querySelector('.glow-text');
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;

glowText.style.transform = `translate(${x * 10 - 5}px, ${y * 10 - 5}px)`;
});
</script>
</body>
</html>