《秋水悠悠》点击小图欣赏
<style>#oBlk {
--w:1300px;--h:720px;
width:var(--w);height:var(--h);
margin:20px -200px;
overflow:hidden;border-radius:32px;
position:relative;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #ff0000;
background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/19dcdf42c324d7f2e5c1ee744a2e3fcd.jpg) center / cover;
}
.pic {
width:250px;height:270px;
offset-path: path("M 1600 365 Q 1080 210 720 365 T -180 365 h -1000");
offset-rotate: 0deg;
background-color:hsla(240, 50%, 80%, 0.7);
overflow:hidden; border-radius:32px;
box-shadow:3px 3px 6px black;
animation:sp 50s linear infinite forwards;
position:absolute; left:0px;top:-80px;
transition: 1.2s;
}
.pic:nth-of-type(1) {animation-delay:0s;}
.pic:nth-of-type(2) {animation-delay:5s;}
.pic:nth-of-type(3) {animation-delay:10s;}
.pic:nth-of-type(4) {animation-delay:15s;}
.pic:nth-of-type(5) {animation-delay:20s;}
.pic:nth-of-type(6) {animation-delay:25s;}
.pic:nth-of-type(7) {animation-delay:30s;}
.pic:nth-of-type(8) {animation-delay:35s;}
.pic:nth-of-type(9) {animation-delay:40s;}
.pic:nth-of-type(10) {animation-delay:45s;}
@keyframes sp {from{offset-distance:0%} to{offset-distance:100%}}
#songName {position:absolute; left:600px;top:530px;color:Yellow;font-size:1.8em;font-family:宋体;}
</style>
<div id='oBlk'>
<img class='pic' src="https://bbs.cnzv.cc/up/upload/pic/12/20250714-d547fd78b7a2c9a93ba84ba8bdab7d66.jpg" />
<img class='pic' src="https://bbs.cnzv.cc/up/upload/pic/12/20250714-e3ee7d844be7490f7cf46b01a5f386e8.jpg" />
<img class='pic' src="https://bbs.cnzv.cc/up/upload/pic/12/20250714-2ccfb26208db2ea1a06d8401862801ce.jpg" />
<img class='pic' src="https://bbs.cnzv.cc/up/upload/pic/12/20250714-2d496330ed93e6fd65467afd18ec81f0.jpg" />
<img class='pic' src="https://bbs.cnzv.cc/up/upload/pic/12/20250714-dbb610b79dda5a710ce3e43a2f35ff02.jpg" />
<img class='pic' src="https://bbs.cnzv.cc/up/upload/pic/12/20250714-a63679e746e4dd351690d11c1330a378.jpg" />
<img class='pic' src="https://bbs.cnzv.cc/up/upload/pic/12/20250714-b57cfa8e881479f23d7c9679118206ce.jpg" />
<img class='pic' src="https://bbs.cnzv.cc/up/upload/pic/12/20250714-26b5fa314c4acc8c6c227b5c33047aae.jpg" />
<img class='pic' src="https://bbs.cnzv.cc/up/upload/pic/12/20250714-d547fd78b7a2c9a93ba84ba8bdab7d66.jpg" />
<img class='pic' src="https://bbs.cnzv.cc/up/upload/pic/12/20250714-e3ee7d844be7490f7cf46b01a5f386e8.jpg" />
<span id="songName"></span>
</div>
<script>
{let songPref = "https://music.163.com/song/media/outer/url?id=";
let songParas = [
["正在播放;秋水悠悠","38679066"],
["正在播放;风雾菩提","38679087"],
["正在播放;慧舟远渡","38673088"],
["正在播放;云山夜雨","38679067"],
["正在播放;孤舟诗渡","38673089"],
["正在播放;涧上春秋","38679068"],
["正在播放;山风归了","38679069"],
["正在播放;山亭自乐","38679070"],
["正在播放;世事如风","38679071"],
["正在播放;江上系舟","38673090"],
];
let aud = document.createElement('audio');
let pics = oBlk.querySelectorAll('.pic');
pics.forEach((item, idx) => {
item.ontouchstart = item.onmouseover = () => {
pics.forEach(ele => ele.style.animationPlayState = 'paused');
item.style.transform = 'scale(1.25)';
}
item.ontouchend = item.onmouseout = () => {
pics.forEach(ele => ele.style.animationPlayState = 'running');
item.style.transform = 'scale(1)';
}
item.onclick = () => {
songName.innerHTML = songParas;
aud.src = songPref + songParas;
aud.play();
}
});
aud.onended = () => songName.innerHTML = '';
}
</script>
<div style="position: absolute; width: 400px; height: 136px; z-index: 2; left: 800px; top: 780px" id="layer3">
<p align="center"><strong><font face="宋体" size="6" face="醉美水芙蓉" color="#FF0000">《秋水悠悠》佛曲专辑</font></strong></p>
<p align="center"><strong><font face="宋体" size="4" color="#FFff00">醉美水芙蓉编辑</font></strong></div> 独具匠心，风格新颖，谢谢醉美管理员精彩分享 精彩分享、问好老师 klxf 发表于 2025-7-14 22:54
独具匠心，风格新颖，谢谢醉美管理员精彩分享
谢谢朋友光临！ 明月工作室 发表于 2025-7-15 15:53
精彩分享、问好老师
谢谢老师光临！ 感谢分享，带来新的视角
页:
[1]