【漫步特效】古巷/CSS萤火虫，雨，变色动画

念若莲 · 发表于昨天 19:50

变色特效好看，标题文字排版漂亮

念若莲 · 发表于昨天 19:51

欣赏学习，问好漫步老师，晚上好

云端漫步 · 发表于昨天 19:57

念若莲发表于 2026-7-23 19:51
欣赏学习，问好漫步老师，晚上好

问好若莲，谢谢临帖支持。让我们同享音画的乐趣！

素心 · 发表于昨天 20:13

这图，咋还抠出影子了，也太认真形象了，给认真的漫步同学一个大大的赞

素心 · 发表于昨天 20:15

我这刚出差回来，就给我放个素，是让我完成作业的意思吗？哈哈
那我高低得试试手

素心 · 发表于昨天 20:17

技法越发的娴熟了，让人看了不得不称奇，无论是排版还是特效都用的活灵活现，

云端漫步 · 发表于昨天 20:49

素心发表于 2026-7-23 20:13
这图，咋还抠出影子了，也太认真形象了，给认真的漫步同学一个大大的赞

素心同学好，这影子复制一个人物向右斜侧，向右斜侧人物在选区（s）再载入选区（o）后，再在选区（s）拉下来俢改（m）羽化2，然后右斜侧人物下层建一层填入黑色，降低透明度。

云端漫步 · 发表于昨天 20:57

素心发表于 2026-7-23 20:15
我这刚出差回来，就给我放个素，是让我完成作业的意思吗？哈哈
那我高低得试试手 ...

你如偷懒

做放三張也可以。

<style>
#mydiv {
margin: 30px 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>

复制代码

绿蔷薇 · 发表于昨天 21:16

漫步老师这个图图漂亮，扣图干净，女子、红伞与古巷搭配和谐
冷暖渐变变色、萤火点缀烘托出朦胧怀旧的烟雨意境~
排版大气，诗文和文案排布妥当，背景朗诵配的很有味道~

绿蔷薇 · 发表于昨天 21:17

漫步老师制作辛苦了，上茶~~

【漫步特效】古巷/CSS萤火虫，雨，变色动画

评分