红楼十二钗 -- 琵琶组曲
本帖最后由 起个网名好难 于 2024-10-10 14:53 编辑 <br /><br /><meta name="referrer" content="never" /><style>
#oBlk {
--w:1440px;--h:730px;
width:var(--w);height:var(--h);
margin:120px 0 40px calc(50% - 801px) ;
overflow:hidden;border-radius:32px;
box-shadow:3px 3px 10px black;
position:relative;
background: url(https://dingyue.ws.126.net/JSgNuHofz5bSFRsBpV33DQmgHa=rWKDn6u87V7hWp6GTR1540033819936compressflag.jpg) center / cover;
}
.pic {
width:180px;height:576px;
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 60s linear infinite forwards;
position:absolute; left:0px;top:0px;
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;}
.pic:nth-of-type(11) {animation-delay:50s;}
.pic:nth-of-type(12) {animation-delay:55s;}
@keyframes sp {from{offset-distance:0%} to{offset-distance:100%}}
#songName {position:absolute; left:50px;top:30px;color:red;font-size:1.3em;font-family:微软雅黑;}
</style>
<div id='oBlk'>
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOAPNbkMOaDRbUEeILyAMh4EJPXVIY0rBTo2OoKibJ9havNpyupo0Z6kLg/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOAduqibh1IEVsicibFB92gEW6ob3wibPjkaOpJKjvU5gQUQQBZibyLqEYTqew/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOA1sn6X24U2SAEibCwHiaDxedtk3OwM9O6CPqhEwia7NAIpicE1zHVxYBibbg/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOAmVDPpECZiaxUeQ26m6EKXgGb1MyGzm6nxPicXb4icEibM0GuWZrDE5hQrA/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOAMw3VtL7micGfrS7fjibaYypjgMZpf9xKhgeWDu669Da5YRsg37VibDsmg/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOAeV9p3hDYX87xbiaLhlibeVx04pwb5du2qZFePjIe8hibiajyrztCv0FAyg/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOAwCMwSr7aWY90ZnRpg1DvNexe5GQja7Gugavchl7nYibmBpy0oulwv5g/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOAHSGZSIziabf8W3ic5tNwKDOayoibDMue6VWkVjCoCp64ViaUhIYvt5Ugjw/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOAjQT13XGG0HAHQjqNXsTdC8JtQB1F7Xk31XkwRDE6pUNRibRNFExyibqQ/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOApica42n6ZzQ4sWhQSJ6tYxJdZZxCxB8cNkMOFlWycbfTtaFoA03X9iaA/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOAibY0DGhXTVPOOZuh9m4Iwwb8KialJmGib2QYibEOJZA7l7qJL3ntv1ce0A/640" />
<img class='pic' src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ozpfmYO1arhTpOevQ9ZNicowbYgfQslOAS0DNGUbLLA2LpMRI3DjxdFW1RgdPTZLtLeiawMJq9RA9CEh67yV35Dw/640" />
<span id="songName"></span>
</div>
<script>
{
let songPref = "https://music.163.com/song/media/outer/url?id=";
let songParas = [
["飘落的迎春","1475941948"],
["惜春作画","1475940888"],
["探春远行","1475940891"],
["悲情宝钗","1475941944"],
["叹息的元春","1475940887"],
["黛玉葬花","1475940892"],
["湘云醉卧","1475940886"],
["女豪王熙凤","1475940889"],
["烟愁可卿","1475941947"],
["妙玉独行","1475940890"],
["水边的李纨","1475941946"],
["乡间的巧姐","1475941949"],
];
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> 起个网名好难 发表于 2024-10-12 20:24
本帖最后由 起个网名好难 于 2024-10-12 20:26 编辑
这个字还会变化的，有趣。成功失败各50%的可能呗{:4_173:} 老师的音画做得漂亮！欣赏点赞！{:4_187:} 这一张张小图自动移到中间还会自己停留一会，再曲线移出。鼠标点也会停的。有音乐吗？ 本帖最后由 梦江南 于 2024-10-10 14:38 编辑
听到了，好像是每一张图有音乐的。看到了右上角的红色音乐名。点图就会出来。{:4_199:} 找图片不难难的是要与图片对应的音乐！老师辛苦了！{:4_190:} 梦江南 发表于 2024-10-10 14:30
老师的音画做得漂亮！欣赏点赞！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 梦江南 发表于 2024-10-10 14:32
这一张张小图自动移到中间还会自己停留一会，再曲线移出。鼠标点也会停的。有音乐吗？
鼠标移到图片上就会停 梦江南 发表于 2024-10-10 14:36
听到了，好像是每一张图有音乐的。看到了右上角的红色音乐名。点图就会出来。
是的，网易云音乐上有这样一组乐曲对应红楼梦的人物。 起个网名好难 发表于 2024-10-10 14:48
鼠标移到图片上就会停
是的。 起个网名好难 发表于 2024-10-10 14:50
是的，网易云音乐上有这样一组乐曲对应红楼梦的人物。
网易云音乐上有就方便了。 梦江南 发表于 2024-10-10 15:22
网易云音乐上有就方便了。
好像直接能用的就剩它了 欣赏老师佳作，点赞！
老谟深虑 发表于 2024-10-10 16:58
欣赏老师佳作，点赞！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 这个不容易，每张图图还能对应歌曲。开始不知道，只以为鼠标拂上去能让小图暂停和放大，原来点击对应图图还能听到对应歌曲呢{:4_199:} 正愁小图看不清名字，有音乐名相应，这下清楚了。{:4_173:} 漂亮的十二钗，欣赏难难好帖{:4_199:} 红影 发表于 2024-10-10 19:24
这个不容易，每张图图还能对应歌曲。开始不知道，只以为鼠标拂上去能让小图暂停和放大，原来点击对应图图还 ...
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
原来是鼠标放上去就会开始播放音乐，但太容易碰到相邻的图片就改作点击在开始。 红影 发表于 2024-10-10 19:27
正愁小图看不清名字，有音乐名相应，这下清楚了。
原图片都有点大，约 900+ x 3000- 帖子里的图片只相当于原图的 1/25 醉美水芙蓉 发表于 2024-10-10 19:41
欣赏老师带来的精彩！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif