【雨声音画】致远方 图赠：素心（贺芳辰）
<style>#mydiv {
margin: 160px 0 30px calc(44% - 960px);
display: grid;
place-items: center;
width: 1900px;
height: 900px;
background: lightblue url('https://www.yhyhlt.com/data/attachment/forum/202607/19/213311v0sv02bsju0bshsn.jpg') no-repeat center/cover;</* 背景图随便放-张*/>
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
#vid {
position: absolute;
width: 130%;
height: 130%;
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: 6;
opacity: .33;</* 熊猫视频调整透明度 */>
}
.img-container {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
#img1 {
animation-name: shakeIn;
}
@keyframes shakeIn {
0%, 25%, 100% { transform: translateX(0) rotate(0); opacity: 0; }
5%, 20% { opacity: 1; transform: translateX(0); }
10% { transform: translateX(-50px) rotate(-5deg); }
15% { transform: translateX(50px) rotate(5deg); }
}
#img2 {
animation-name: scaleIn;
}
@keyframes scaleIn {
0%, 25%, 50%, 100% { transform: scale(0.8); opacity: 0; }
30%, 45% { transform: scale(1); opacity: 1; }
}
#img3 {
animation-name: fadeIn;
}
@keyframes fadeIn {
0%, 50%, 75%, 100% { opacity: 0; }
55%, 70% { opacity: 1; }
}
#img4 {
animation-name: rotateIn;
}
@keyframes rotateIn {
0%, 75%, 100% { transform: rotate(-360deg) scale(0.8); opacity: 0; }
80%, 95% { transform: rotate(0) scale(1); opacity: 1; }
}
</style>
<div id="mydiv">
<audio id="aud" src="https://www.joy127.com/url/127300.mp3" autoplay loop></audio> </* 音乐链*/>
<video id="vid" src="https://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/flash/MP4/DH04.mp4" autoplay="" loop="" muted=""></video></* 熊猫视频 */>
<!-- 四张满屏图片 -->
<div id="img1" class="img-container">
<img src="https://www.yhyhlt.com/data/attachment/forum/202607/19/213311v0sv02bsju0bshsn.jpg" alt="图片1">
</div>
<div id="img2" class="img-container">
<img src="https://www.yhyhlt.com/data/attachment/forum/202607/19/213311v0sv02bsju0bshsn.jpg" alt="图片2">
</div>
<div id="img3" class="img-container">
<img src="https://www.yhyhlt.com/data/attachment/forum/202607/19/213311v0sv02bsju0bshsn.jpg" alt="图片3">
</div>
<div id="img4" class="img-container">
<img src="https://www.yhyhlt.com/data/attachment/forum/202607/19/213311v0sv02bsju0bshsn.jpg" alt="图片4">
</div>
</div> 致素心：岁岁安然，初心温柔
人海漫漫，网海迢迢，最是难得一场久处不厌的相逢。
一晃十余载，我们隔着一方屏幕，在方寸论坛里相伴朝夕。
没有朝夕碰面的朝夕相守，却有岁岁年年的真心相伴。
时光翻卷过无数个晨昏，论坛的界面几经更迭，往来的人走走停停，
唯有你，我的素爷，始终温润如初，岁岁安好。
素爷，相逢于论坛，相知于岁月。人如其名，本心素雅，温柔通透。
恰逢生辰，愿清风常伴，万事舒心，往后年年，我们依旧相伴闲谈。
漫长岁月因你的温柔多了几分暖意。
十余载知己，是流年赠予我们最好的礼物。
山水一程，岁月一生，愿我们情谊长青，岁岁相伴，年年相依，
不负遇见，不负素心，不负岁岁光阴。
又一年的生辰到来，祝我家素爷，生日快乐，一生温柔顺遂~ @素心
素爷十余载的相伴，再多的语言都不如我们彼此懂得~{:1_151:} 雨声这背景图也要換上你的图哦，背景图随便換一张，我给你换上了。 声声的这幅音画，黑、白、粉的柔和对比，既突出人物主题，
与人物衣裙形成和谐的统一，充分营造出纯净、超脱的视觉氛围。 云端漫步 发表于 2026-7-19 22:13
雨声这背景图也要換上你的图哦，背景图随便換一张，我给你换上了。
好的，谢谢漫步老师，我看到密密麻麻的代码，有点晕菜~:P 观感极佳。歌曲入心意境满满，欣赏问好雨声。 借帖祝素心芳辰！吃不胖、睡得香、钱包鼓、没人烦，年年颜值在线，快乐永不打烊！;P 雨声 发表于 2026-7-19 22:16
好的，谢谢漫步老师，我看到密密麻麻的代码，有点晕菜~
刚才没仔细看其实你只有一张图;P 云端漫步 发表于 2026-7-19 22:20
刚才没仔细看其实你只有一张图
是的，一张图，等以后有时间做几张图~;P