【漫步特效】古巷/CSS萤火虫，雨，变色动画
<style>#mydiv {
margin: 160px 0 30px calc(50% - 931px);
display: grid;
place-items: center;
width: 1700px;
height: 900px;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
.firefly {
position: absolute;
width: 3px;
height: 3px;
background-color: #7FFF00;
border-radius: 50%;
box-shadow: 0 0 8px 2px rgba(127, 255, 0, 0.8);
opacity: 0;
z-index: 3;
animation: glow 2s infinite alternate;
}
@keyframes glow {
0% {
opacity: 0.3;
box-shadow: 0 0 4px 1px rgba(127, 255, 0, 0.5);
}
50% {
opacity: 1;
box-shadow: 0 0 10px 3px rgba(127, 255, 0, 0.9);
}
100% {
opacity: 0.4;
box-shadow: 0 0 6px 2px rgba(127, 255, 0, 0.6);
}
}
.bg-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
animation: fadeLoop 24.6s infinite;
z-index: 0;
}
.bg-slide1 { background-image: url('https://644220.freep.cn/644220/3/ss1.jpg'); animation-delay: 0s; }
.bg-slide2 { background-image: url('https://644220.freep.cn/644220/3/ss2.jpg'); animation-delay: -3.8s; }
.bg-slide3 { background-image: url('https://644220.freep.cn/644220/3/ss3.jpg'); animation-delay: -7.6s; }
.bg-slide4 { background-image: url('https://644220.freep.cn/644220/3/ss4.jpg'); animation-delay: -11.4s; }
.bg-slide5 { background-image: url('https://644220.freep.cn/644220/3/ss5.jpg'); animation-delay: -15.2s; }
.bg-slide6 { background-image: url('https://644220.freep.cn/644220/3/ss6.jpg'); animation-delay: -19s; }
.bg-slide7 { background-image: url('https://644220.freep.cn/644220/3/ss7.jpg'); animation-delay: -22.8s; }
@keyframes fadeLoop {
0% { opacity: 0; }
10% { opacity: 1; }
21% { opacity: 1; }
33% { opacity: 0; }
44% { opacity: 0; }
}
#vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
mask: linear-gradient(to top right, red 88%, transparent 0);
-webkit-mask: linear-gradient(to top right, red 88%, transparent 0);
z-index: 3;
opacity: .35;
}
</style>
<div id="mydiv">
<div class="bg-slide bg-slide1"></div>
<div class="bg-slide bg-slide2"></div>
<div class="bg-slide bg-slide3"></div>
<div class="bg-slide bg-slide4"></div>
<div class="bg-slide bg-slide5"></div>
<div class="bg-slide bg-slide6"></div>
<div class="bg-slide bg-slide7"></div>
<video id="vid" src="https://img2.tukuppt.com/video_show/15653652/00/85/70/60ff9073b3198.mp4" autoplay="" loop="" muted=""></video>
<audio id="aud" src="https://mp3.joy127.com/music/12911.mp3" autoplay loop>
</div>
<script>
function createFireflies(count) {
const container = document.getElementById('mydiv');
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;
for (let i = 0; i < count; i++) {
const firefly = document.createElement('div');
firefly.classList.add('firefly');
container.appendChild(firefly);
const startX = Math.random() * containerWidth;
const startY = Math.random() * containerHeight;
firefly.style.left = `${startX}px`;
firefly.style.top = `${startY}px`;
const size = 1 + Math.random() * 3;
firefly.style.width = `${size}px`;
firefly.style.height = `${size}px`;
const delay = Math.random() * 5;
firefly.style.animationDelay = `${delay}s`;
const fireflyData = {
x: startX,
y: startY,
direction: Math.random() * Math.PI * 2,
speed: 0.5 + Math.random() * 2,
swing: 0.02 + Math.random() * 0.05,
swingPhase: Math.random() * Math.PI * 2,
changeInterval: 3000 + Math.random() * 5000,
lastChange: Date.now()
};
animateFirefly(firefly, fireflyData, containerWidth, containerHeight);
}
}
function animateFirefly(firefly, data, maxWidth, maxHeight) {
const now = Date.now();
const deltaTime = (now - data.lastTime) || 16;
data.lastTime = now;
if (now - data.lastChange > data.changeInterval) {
data.direction += (Math.random() - 0.5) * Math.PI;
data.lastChange = now;
data.changeInterval = 3000 + Math.random() * 5000;
}
data.swingPhase += data.swing;
const swingOffset = Math.sin(data.swingPhase) * 0.5;
const currentDirection = data.direction + swingOffset;
data.x += Math.cos(currentDirection) * data.speed * (deltaTime / 16);
data.y += Math.sin(currentDirection) * data.speed * (deltaTime / 16);
if (data.x < 0) data.x = maxWidth;
if (data.x > maxWidth) data.x = 0;
if (data.y < 0) data.y = maxHeight;
if (data.y > maxHeight) data.y = 0;
firefly.style.left = `${data.x}px`;
firefly.style.top = `${data.y}px`;
requestAnimationFrame(() => {
animateFirefly(firefly, data, maxWidth, maxHeight);
});
}
createFireflies(150);
</script> @素心 古巷 变色和萤火效果，给清冷的古巷，增添了梦幻感。 欣赏漫步兄新作！ 音画狠质感，整体背景效果狠怀旧，标题简约大气，赞一个~ 精彩的音画制作,画画很美,配乐旋律优美,美了醉了. 姚云裳 发表于 2026-7-23 19:19
音画狠质感，整体背景效果狠怀旧，标题简约大气，赞一个~
视频有没按我说的去生成了没:) 欧阳风刀 发表于 2026-7-23 19:15
变色和萤火效果，给清冷的古巷，增添了梦幻感。
悠长古巷静卧暮色里，斑驳砖墙印着岁月磨洗的纹路。徐徐晚风穿过狭长甬道，
卷起零星落叶，似故人缓步归来。踏在凹凸不平的青石板上，
旧日光景纷至沓来，耳畔依稀浮动旧时笑语。 云端漫步 发表于 2026-7-23 19:25
视频有没按我说的去生成了没
还没时间呢 满屏的萤火虫很醒目{:9_272:}