风雨恋 - 林淑容
本帖最后由 亚伦影音工作室 于 2026-8-12 21:39 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {position: relative;display: grid;place-items: center;margin: 30px 0;width: 1286px;height: 720px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";--state: running; }
#intro {margin: 0px0px;z-index:1;
width: 100%;
height:100%;
position: absolute;
background:#220080;
background-size: cover;
opacity:1;
animation: hue-rotate 6s linear infinite var(--state);
}
@keyframes hue-rotate {
0%{
filter: hue-rotate(-360deg);
}
100%{
filter: hue-rotate(360deg);
}
}
#tu{position:absolute;z-index: 4;
width: 100%;
height: 100%;
opacity: 0;filter:hue-rotate(0deg)contrast(180%)brightness(100%);
-webkit-mask-image: radial-gradient(black 25% ,transparent 85%);
animation:cover30s linear infinite var(--state);
bottom: 0px;
left:0%;
}
@keyframes cover{0% {opacity: 0; transform: scale(1);}
10% {opacity: 1;transform: scale(1);}
22% {opacity: 1;transform: scale(1);}
24% {opacity: 0; transform: scale(6);}
}
#tu:nth-child(1) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9d79fb1d6f51c9e42a547fed2b492db1.jpg)no-repeat center/cover;
animation-delay: 24s;
}
#tu:nth-child(2) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5b85ddb548f2d1279ec0bc2811c5aa8b.png)no-repeat center/cover;
animation-delay: 18s;
}
#tu:nth-child(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/14e93ba9472639a8f9f4aab0c18f1914.jpg)no-repeat center/cover;
animation-delay: 12s;
}
#tu:nth-child(4) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/23cfa118141a616e22f2c3ba953ef0eb.jpg)no-repeat center/cover;
animation-delay: 6s;
}
#tu:nth-child(5) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5ecd9bf72e90082400fb4fa87c91ba5f.jpg)no-repeat center/cover;
animation-delay: 0s;
}
#main {z-index: 6;
position: absolute;
overflow: hidden;
width: 100%;height:100%;
min-height: 98vh;margin: 0px 0px;
perspective: 340px;
}
#stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
box-shadow: -238px 108px #f7f7f7, 193px -376px #f7f7f7, -1264px -60px #fafafa,
145px -443px #c9c9c9, -1440px 37px #f7f7f7, 262px -136px #cfcfcf,
212px 219px #e3e3e3, 319px 223px #c7c7c7, 1246px -51px #c9c9c9,
308px 26px #e0e0e0, 147px 229px #e6e6e6, -1041px 450px #d1d1d1,
671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
311px -475px #fcfcfc, -413px -105px #d4d4d4, 868px -435px #f7f7f7,
-790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c9c9c9,
-1294px -297px #cccccc, -63px 200px #f0f0f0, -592px -86px #f7f7f7,
-732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c9c9c9,
-1442px -153px #f7f7f7, 1124px -219px #ededed, 701px 257px #f0f0f0,
36px -179px #ebebeb, -937px 480px #f7f7f7, -267px -418px #f2f2f2,
1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,
624px 275px #fafafa, -473px 150px #e6e6e6, -537px -348px #d4d4d4,
410px 455px #ebebeb, 497px -29px #cccccc, 416px -370px whitesmoke,
977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,
-1049px 409px white, 959px 407px #c9c9c9, -1153px -168px #dedede,
-437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
-925px 452px #cccccc, 244px 30px #c4c4c4, 453px -336px #dedede,
993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
-170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
-1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
1056px 367px #ebebeb, 261px -128px #cccccc, 1017px 401px #cccccc,
1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3,
1481px 268px #d1d1d1, 832px -345px #cccccc, -863px 138px #f0f0f0,
-997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
-468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
823px -225px #cccccc, -1172px -348px white, 505px -319px #ededed,
94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #f2f2f2,
1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #fafafa,
205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,
649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9,
-1405px 397px #cfcfcf, 30px -81px #e6e6e6;
animation: fly 3s linear infinite var(--state);
transform-style: preserve-3d;
}
#stars:before,
#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:before {
transform: translateZ(-300px);
animation: fade1 3s linear infinite var(--state);
}
#stars:after {
transform: translateZ(-600px);
animation: fade2 3s linear infinite var(--state);
}
@keyframes fly {
from {
transform: translateZ(0px);
}
to {
transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
@keyframes fade2 {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#bnt{left:80%;top: 58%;width: 150px;height: 50px;position: absolute; cursor: pointer;z-index: 61}
#ptxt{width:100%;height:6px;font:100 20px/0px "华文行楷","SimHei", "Arial", "sans-serif";color: #fff;line-height:0px;bottom: 32%;left:84%;position: absolute;z-index: 2}
#prog {position: absolute; display: grid; place-items: center; width: 215px; height: 115px; left:77%; bottom: 30%;border-radius: 80%;-webkit-mask: radial-gradient( transparent 67%, #000 68%, #000 0);cursor:pointer; z-index: 60;}
#wrapper {
position: absolute;
padding: 0px;
font-weight:100;font-size:3.4em;font-family:"Ma Shan Zheng","STKaiti","SimHei", cursive, serif;
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0)hue-rotate(20deg)contrast(250%)brightness(120%);
white-space: pre;transform: translateX(0%);text-align: center;
width:100%;height:10%;left: 0%;z-index: 20;
top:80%;white-space: nowrap;
}
.char {
display: inline-block;
padding: 0px 4px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards var(--state),flash 0.5s linear infinite var(--state);
}
@keyframes fadeIn {0% {
opacity: 1; transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1.1,1);
}
100% {
opacity: 1; transform: scale(1.1,1);
}
}
@keyframes flash {
100% {filter: hue-rotate(360deg);}
}
#fullscreen { opacity:1;position: absolute; width: 20px; height: 20px; bottom:26px; cursor: pointer;right:1%;z-index: 40;filter:invert(0%);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<div><div id="tu"></div><div id="tu"></div><div id="tu"></div><div id="tu"></div><div id="tu"></div></div>
<div id="intro"></div>
<div id="main">
<div id="stars"></div>
</div>
<img id = "bnt" src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png">
<div id="ptxt">正在播放 0%</div>
<divid="prog"></div>
<div id="wrapper"></div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<audio id="aud"src="http://music.163.com/song/media/outer/url?id=2700207306.mp3" loop autoplay ></audio>
</div>
<script>
prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 10 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from 0deg,#ff0000,#ff0000,#ff0000 ' + aud.currentTime / aud.duration * 100 + '%, #fff 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
bnt.onclick = () => aud.paused ? (aud.play(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png",djtu.src = "https://pic1.imgdb.cn/i/0340jPsa8KlGj0lIjMrU0Y.gif") : (aud.pause(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5751f8fda9783decc81.png",djtu.src = "");
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
aud.addEventListener("timeupdate",function(){
var percent= aud.currentTime / aud.duration
var sp = 600 / 100 ;
var swidth =(percent * 100 * sp) + "px";
console.log(percent*100,swidth)
//保留2位小数
document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
})
let fs= true;
fullscreen.onclick = () => {
fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
fs = !fs;
}
/*进度条 进度时间*/
prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 10 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from 0deg,#ff0000,#ff0000,#ff0000 ' + aud.currentTime / aud.duration * 100 + '%, #fff 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
/*结束*/
const gc = `风雨恋 - 林淑容
一阵风一阵雨
风雨里太凄迷
一阵风把爱情吹进了我怀里
一阵雨把恨打进了我的心底
我在风里爱你
在雨里恨你
风雨里
爱你恨你
风雨没关系
爱恨我愿意
抓把风雨藏在心里
一阵风一阵雨
风雨里太无情
一阵风把爱情吹到了何处去
一阵雨把恨撒遍了满天满地
我在风里叹息
在雨里哭泣
风雨里
爱你恨你
风雨不怕你
爱恨我珍惜
抓把风雨藏在心里
风雨里
爱你恨你
风雨不怕你
爱恨我珍惜
抓把风雨藏在心里
啊
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 0 : 0);
const y = Math.random() * (Math.random() > 0.5 ? 0 : 0);
span.style.cssText += `
color: #${Math.random().toString(11).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
制作精美，效果漂亮，谢谢亚伦老师精彩示范{:4_190:} 歌词显示有点不正常：
1、歌词显示跟不上歌曲演唱速度，即有的歌词显示不全，或只听音乐，不见歌词。
2、第二遍时有音乐，歌词仍停在上遍的最后歌词。
3、点击进度条，不显示当前的歌词。
以上是我这见到的情况。 以上所说歌词问题，不知是否我这网速问题造成的。 彩云归 发表于 2026-8-12 15:21
以上所说歌词问题，不知是否我这网速问题造成的。
显示很正常，老师的网速有问题！ 亚伦制作，件件是精品。 制作很漂亮，这么多美人儿，让这个帖子美伦美央。
欣赏亚伦老师好帖{:4_199:} 彩云归 发表于 2026-8-12 15:17
歌词显示有点不正常：
1、歌词显示跟不上歌曲演唱速度，即有的歌词显示不全，或只听音乐，不见歌词。
2、 ...
是的，我这儿显示情况也如此，谢谢彩云归老师及时反馈{:4_190:} 本帖最后由 杨帆 于 2026-8-12 18:36 编辑
亚伦影音工作室 发表于 2026-8-12 15:37
显示很正常，老师的网速有问题！
请亚伦老师看看，到底是什么原因{:4_190:} 高手，欣赏！{:4_187:} 杨帆 发表于 2026-8-12 18:27
请亚伦老师看看，到底是什么原因
以完善，修改！谢谢老师！ 彩云归 发表于 2026-8-12 15:21
以上所说歌词问题，不知是否我这网速问题造成的。
以完善，修改。谢谢老师！ 亚伦影音工作室 发表于 2026-8-12 21:43
以完善，修改！谢谢老师！
谢谢亚伦老师，是什么原因，目前的显示状况明显改善{:4_190:}
我这看，还是有部分句或句的部分 字 直接看不到（用鼠标去选中，可看到） 杨帆 发表于 2026-8-13 11:48
谢谢亚伦老师，是什么原因，目前的显示状况明显改善
我这看，还是有部分句或句的部分 字 直 ...
还是浏览器的问题！ 亚伦影音工作室 发表于 2026-8-13 12:09
还是浏览器的问题！
知道了~谢谢亚伦老师{:4_190:} 漂亮~~~~亚纶这个制作真漂亮，赞一记！{:4_178:}
页:
[1]