醉美水芙蓉 发表于 2023-9-7 21:45

动不完的情


<style>
#papa {margin: 0px 0 0 calc(50% - 681px); width: 1164px;height:680px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;border: 1px solid;background: #333 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/8758264095a0dc043b565e1730a3e1e9.mp4.jpg') no-repeat center/cover; position: relative;z-index: 12345;}
#tu{position: absolute;top:0%; left:0%;z-index: 2;
        width: 100%;background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/8758264095a0dc043b565e1730a3e1e9.mp4.jpg') no-repeat center/cover;
        height: 100%;animation: round 3s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(10%,0%);filter:hue-rotate(360deg);
opacity:1}

100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}


#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:75%; transform: translate(-50%, 10px);font:normal 3.2em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; left: 0%;top:85%;cursor: pointer;z-index:880; width: 100%;height:100px;mix-blend-mode: exclusion;filter:invert(100%)}
@keyframes cover1{0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg); filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id='tu'></div>
<span id="fullscreen">全屏观赏</span>
<div id="main" >
<div id="stars"></div>
</div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>

<div id="mplayer"><video id="aud" autoplay="autoplay" controls="controls" height="100%" loop="loop" src="https://www.qqmc.com/mp3/music298542254.mp3"width="100%"></video></div>
</div>

<script>
(function() {
        let mKey = 0, mFlag = true;
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
        let geci = `动不完的情
作词：张凤敏
作曲：刘艺新
编曲：DJ 默涵
合声：凌菲
制作人：笑天
LRC编辑：醉美水芙蓉
这雨濛濛这风轻轻
我们不经意相逢
这夜深深这花纷纷
这喝不完的情太浓
这灯朦胧这歌声声
我们禁不住相拥
这梦悠悠这影摇动
这化不开的爱太重
你是我动不完的情做不完的梦
是我最柔软的地方碰也不能碰
你的眼睛是绝美的风景
你的笑容曾治愈我伤痛
你是我动不完的情做不完的梦
是我最柔软的地方碰也不能碰
你的离开让我世界分崩
只有想你才能把每一天支撑
这灯朦胧这歌声声
我们禁不住相拥
这梦悠悠这影摇动
这化不开的爱太重
你是我动不完的情做不完的梦
是我最柔软的地方碰也不能碰
你的眼睛是绝美的风景
你的笑容曾治愈我伤痛
你是我动不完的情做不完的梦
是我最柔软的地方碰也不能碰
你的离开让我世界分崩
只有想你才能把每一天支撑
谢谢欣赏！
`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        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;}
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
        mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();


</script>

<script>

let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
stars.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>stars.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>stars.style.animationPlayState = 'paused');


tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
</script>
<style>
#main {
position: relative;
overflow: hidden;
width: 100%; z-index: 2;
min-height: 98vh;
perspective: 340px;}

#stars {
position: absolute;z-index: 2;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-radius:50%;
box-shadow: -238px 108px #fff000, 193px -376px #ff0000, -1264px -60px #fff000,145px -443px #fff000, -1440px 37px #fff000, 262px -136px #fff000, 212px 219px #fff000, 319px 223px #fff000, 1246px -51px #c9c9c9,308px 26px #fff000, 147px 229px #fff000, -1041px 450px #fff000, 671px 86px white, -921px 234px #fff000, -957px 242px #fff000, 1249px -285px #fff000, 741px 434px #fff000, -1030px 330px #00f000, 311px -475px #fcfcfc, -413px -105px #ff0000, 868px -435px #f7f7f7, -790px 289px #ff0000, 202px 427px #fcfcfc, -22px -158px #ff0000, -1294px -297px #cccccc, -63px 200px #ff0000, -592px -86px #f7f7f7, -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #ff0000, -1442px -153px #00ff00, 1124px -219px #ededed, 701px 257px #ff0000, 36px -179px #ff0000, -937px 480px #f7f7f7, -267px -418px #00ff00, 1467px 127px #ff0000, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,180px 430px #ffffff, 624px 275px #ff0000, -473px 150px #e6e6e6, -537px -348px #d4d4d4, 410px 455px #ff0000, 497px -29px #cccccc, 416px -370px whitesmoke, 977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,-416px 370px whitesmoke, -1049px 409px white, 959px 407px #ff0000, -1153px -168px #dedede, -437px -216px #dbdbdb, -572px 420px #ff0000, -228px 78px #ff0000, -925px 452px #ccffcc, 244px 30px #ff0000, 453px -336px #fff000, -453px -336px #ff0000, 993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #000078, -170px -153px #fff000, 987px -208px #00ff00, 596px 166px #fcfcfc, -1362px -28px #ff0000, 1291px -106px #e3e3e3, -1128px 169px #ededed, 1056px 367px #ebebeb, 261px -128px #ff0000, 1017px 401px #cccccc, 1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3, 1481px 268px #00ff00, 832px -345px #000090, -863px 138px #00ff00, -997px -412px #e3e3e3, -330px -260px #ffff00, 691px -39px #fcfcfc, -468px -135px #ff0000, -535px 405px #e8e8e8, -1289px -284px #e3e3e3, 823px -225px #00ff00, -1172px -348px white, 505px -319px #ff0000, 94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #e2f2f2, 1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white, 1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #00f000, 205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #00ff00,-1104px 121px #fffcfc, 649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9, -1405px 397px #cfcfcf, 30px -81px #ff0000;130px -130px #eeeeee,1130px -230px #00ff00,-1000px -1550px 30px 0px #ff0000,500px -350px 100px 0px #00ff00;
animation: fly 2s linear infinite;
transform-style: preserve-3d;
}

#stars:before{
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}

#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}

#stars:before {
transform: translateZ(-300px);
animation: fade1 2s linear infinite;
}

#stars:after {
transform: translateZ(-600px);
animation: fade2 2s linear infinite;
}

@keyframes fly {
from {
    transform: translateZ(0px);
}
to {
    transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
    opacity: 0.9;
}
to {
    opacity: 1;
}
}
@keyframes fade2 {
from {
    opacity: 0.2;
}
to {
    opacity: 0.9;
}
}
</style>

红影 发表于 2023-9-7 22:20

水芙蓉也做了个常规播放器的帖子呢，真漂亮{:4_199:}

醉美水芙蓉 发表于 2023-9-7 22:37

红影 发表于 2023-9-7 22:20
水芙蓉也做了个常规播放器的帖子呢，真漂亮

谢谢红影美女支持！

红影 发表于 2023-9-7 22:39

醉美水芙蓉 发表于 2023-9-7 22:37
谢谢红影美女支持！

问好水芙蓉，晚上好{:4_187:}

冬天的雨 发表于 2023-9-8 10:33

这个就是平时的mp3播放器，这样一看效果不错的{:4_199:}

冬天的雨 发表于 2023-9-8 10:34

{:4_199:}{:4_199:}

冬天的雨 发表于 2023-9-8 10:34

美女制作辛苦，欣赏好制作{:4_187:}

醉美水芙蓉 发表于 2023-9-8 12:00

冬天的雨 发表于 2023-9-8 10:33
这个就是平时的mp3播放器，这样一看效果不错的

冬雨老师好久不见了，谢谢欣赏支持！

千羽 发表于 2023-9-8 19:37

这个效果很惊艳，美美哒。芙蓉的图都能给人不一样的美感，送花花了{:4_187:}

醉美水芙蓉 发表于 2023-9-8 21:22

千羽 发表于 2023-9-8 19:37
这个效果很惊艳，美美哒。芙蓉的图都能给人不一样的美感，送花花了

千羽美女晚上好！谢谢欣赏支持！
页: [1]
查看完整版本: 动不完的情