醉美水芙蓉 发表于 2023-9-23 21:55:56

最美的爱情

<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;place-items: center; position: relative;z-index: 12345;}
#mydiv {
      width: 1164px;
      height: 680px;
background: #333 url('https://pic.imgdb.cn/item/650d9af0c458853aef6b8e30.png') no-repeat center/cover;
            
      position: absolute;
      --state: paused;
}
#tu{position: absolute;top:0%; left:0%;
      width: 100%;background:url('https://pic.imgdb.cn/item/650d9c1ec458853aef6e5d14.jpg') no-repeat center/cover;
      height: 100%;animation: round 4s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,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: 2s; position: absolute; left: 50%;top:82%;transform: translate(-50%); font:normal 2.8em 华文新魏; color:#0000;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0); z-index:6; place-items: center; overflow: hidden; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; place-items: center;}
@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(150%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(150%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(150%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
</style>
<div id="papa">
<div id="mydiv"><div id='tu'></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</div></div>

<audio id="aud" src="https://www.qqmc.com/mp3/music300313267.mp3" autoplay loop></audio>
</div>
<script>
let script = document.createElement('script');
script.charset = 'utf-8';
script.src ='https://638183.freep.cn/638183/web/api/simpleplayer.js';
document.body.appendChild(script);

script.onload = () => {
      HCPlayer({
                papa: '#mydiv',
                player_css: 'left: 12%; bottom: 5%;',
                img: {
                        enter: '',/* 进入全屏按钮地址 */
                        quit: '',/* 退出全屏按钮地址 */
                        play: '',/* 播放按钮地址 */
                        pause: '',/* 暂停按钮地址 */
                }
      });
};
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
</script>
<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>

zlpi@163.com 发表于 2023-9-24 08:33:47

欣赏佳作

醉美水芙蓉 发表于 2023-9-24 09:18:04

zlpi@163.com 发表于 2023-9-24 08:33
欣赏佳作

谢谢山里人老师光临！

活跃概况 发表于 2023-10-25 18:09:14

这个作品漂亮！！！！

醉美水芙蓉 发表于 2023-10-26 22:11:46

活跃概况 发表于 2023-10-25 18:09
这个作品漂亮！！！！

谢谢朋友光临！

332 发表于 2024-1-1 21:33:09

这个作品漂亮！！！！
页: [1]
查看完整版本: 最美的爱情