朵拉 发表于 前天 23:52

【云荷十周年庆典】一生所爱

<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{
            position: relative;
            width: 1186px;
            height: 680px;
            margin-left: 0px;
            margin-top: 30px;
            overflow: hidden;z-index:12345;
            background: url('https://pic1.imgdb.cn/item/69b15bf5e42d9f85db6f5d5f.jpg') no-repeat center / cover;
font-family: "Ma Shan Zheng","仿宋体","SimHei", "Arial", "sans-serif";--state:paused;
      }
      .intro {margin: 0px0px;z-index:1;
      width: 100%;
      height:100%;
      position: absolute;
background: url('https://pic1.imgdb.cn/item/69b15bf5e42d9f85db6f5d5f.jpg'), linear-gradient(125deg, #e56420, #c555aa, #3d9c31, #37bbde);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 2s linear infinite;
}
@keyframes hue-rotate {
from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
#bfq{ transform:scale(0.6);
   position: absolute;
      width: 450px;
      height:350px;overflow: hidden;
      top:0%;background:#0000;
   left: 60%;z-index: 20;--state:paused;}
#tmsg{position: absolute;width: 150px; height: 60px;font:400 18px sans-serif;color: #000;top:20px;left: 160px;}
#tu{   
      position:absolute;
      width: 300px;box-shadow:0px 0px 0px 1px #000,0px 0px 0px 0px #880000;
      height:300px;border-radius: 10px;
      top:10%;background:#000 url('https://pic1.imgdb.cn/item/69b16ba3e42d9f85db6f67dc.jpg') no-repeat center / cover;
   left: 2%;z-index: 2;}
#cp{   
      position:absolute;
      width: 260px;border-radius: 50%;
      height:260px;animation: rotating 6s infinite linear var(--state);
      top:15%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   transition: all 1s;
   left: 41%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
   @keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 260px;
height: 260px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 65%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 1px #fff;
background:#000 url('https://pic1.imgdb.cn/item/69b16ba3e42d9f85db6f67dc.jpg') no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
}
#bnt{margin: 240px 20px ; width: 30px; height: 30px;position: relative; cursor: pointer; }
#cndpt{position: absolute; width: 30px; height: 30px;
background:#000;transition: all 1s;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 30px; height: 30px;
opacity:0; background:#000;transition: all 1s;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}

#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(90deg, #e56420, #c22525, #000078, #00aa00, #ff0000);
position: absolute;z-index: 16;left: 50%; top: 86%;transform: translate(-50%);font-size: 3em;font-weight: 400;color:#000078;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }

#fullscreen{border-radius: 4px;position: absolute;
color:#000;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 18px;
border: none;
cursor: pointer;top: 5px;left: 3%;
}
</style>
   <divid="papa">
    <div id="fullscreen" title="屏展模式">全屏欣赏</div>
    <div id="bfq">
<div id="tu">
<div id="tmsg">00:00 | 00:00</div>
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
</div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div class='intro'></div>
<div data-lrc="" id="lrc"></div>
</div>
<audio id="audio" src="https://pan.suyanw.cn/view.php/152c5b342241f37d6ebb7072b88e6f65.mp3" loop autoplay ></audio>

<script>
audio.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.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;
      };   

let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
   
const intro= document.querySelector('.intro');
letmState = () => audio.paused ?
( bfq.style.setProperty('--state', 'paused'),bnt.title = '点击播放',intro.style.animationPlayState = 'paused' ) :
( bfq.style.setProperty('--state', 'running'),bnt.title = '点击暂停',intro.style.animationPlayState = 'running' );
audio.onplaying = audio.onpause = () => mState();

bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',document.getElementById("cp").style.left = '41%') : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',document.getElementById("cp").style.left = '15%');

(function() {
/*lrc*/
let lrcStr = `
一生所爱(R&B 版)-Edz 造梦赫兹
贺：云荷论坛十周年快乐！
词：唐书琛
曲：卢冠廷
制作：朵 拉
从前
现在
过去了再不来
红红落叶
长埋尘土内
开始
终结
总是没变改
天边的你
飘泊在白云外
苦海
翻起爱恨
在世间
难逃避命运
相亲
竟不可接近
或我应该
相信是
缘分
情人别后
永远再不来
消散的
情缘
无言独坐
放眼尘世外
愿来日
再续
鲜花虽会凋谢
只愿
但会再开
为你
一生所爱隐约
守候
在白云外
期待
苦海
翻起爱恨
在世间
难逃避命运
相亲
竟不可接近
或我应该
相信是
缘分
苦海
翻起爱恨
在世间
难逃避命运
相亲
竟不可接近
或我应该
相信是
缘分
或我应该
相信是
缘分
`;
/* mKey - mFlag ùaverAdd */
let mKey = 0, mFlag = true, averAdd = 0.3;

/* */
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;
};

/* lrc n*3 */
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 showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (audio.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 = () => audio.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/**/
audio.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('play', () => mState());
audio.addEventListener('seeked', () => calcKey());
let lrcAr = getLrcAr(lrcStr);
})();
</script>

朵拉 发表于 前天 23:55

祝云荷论坛十周年快乐，越来越精彩哦{:1_155:}{:1_155:}

圊圊淥詶 发表于 昨天 09:50

朵拉的播放器好美，选择的歌曲也好听，
卢冠廷的经典曲目，非常好听~~

圊圊淥詶 发表于 昨天 09:51

这首歌我唱过，好难唱，后来作罢了，留着刺激自己的耳朵吧，哈哈哈

圊圊淥詶 发表于 昨天 09:52

谢谢朵拉为庆典准备的歌曲，辛苦了，
同贺云荷十周年~~

念若莲 发表于 昨天 11:34

播放器界面好炫，色彩夺目，蛐蛐儿很动听{:10_302:}

念若莲 发表于 昨天 11:35

谢谢朵拉姑娘分享，我们共贺论坛生日快乐{:10_310:}

玫の玫 发表于 昨天 14:40

和朵拉一起同贺云荷十周年庆典！{:9_269:}

玫の玫 发表于 昨天 14:41

欣赏朵拉佳作，感谢精彩分享，感谢给大家带来美滴享受！祝创作愉快，天天好心情！{:1_155:}{:1_155:}

玫の玫 发表于 昨天 14:42

歌曲好听， 好音质无可挑剔！制作辛苦，听歌愉快！{:9_285:}
页: [1] 2
查看完整版本: 【云荷十周年庆典】一生所爱