焱鑫磊 发表于 2023-3-9 12:00

《拉萨夜雨》DJ（试发代码帖）

本帖最后由 焱鑫磊 于 2023-3-12 00:12 编辑 <br /><br /><style>
#papa{margin: 80px -290px ; width: 1164px; height: 640px;background: lightgreen url('https://365.tf/disk/tf/1678384109.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#mplayer {position: absolute;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 10px 4px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--bgColor: linear-gradient(to right, var(--prog) 0%, var(--prog) 0%, var(--track) 0%, var(--track));--ww: 260px;--color: hsla(100,10%,80%,.95);--track: hsla(90, 100%, 95%, .65);--prog: hsl(0,50%,50%);}
#btnplay{--state: paused;z-index: 40;
position: absolute;top:-20%; left:40%;
width: 40px;
height: 40px;
cursor: pointer;background:url(https://365.tf/disk/tf/1677924635.png)0px 0px/100% 100%;border-radius:0%;
animation: spin 10s infinite linear;animation-play-state: var(--state);
}
@keyframes spin {0%{transform: rotate(-360deg);filter:hue-rotate(360deg)contrast(120%)brightness(300%)}
100%{transform: rotate(0deg);}
}
#prog {grid-area: prog;-webkit-appearance: none;width: var(--ww); outline: none;background: none;position: relative;}
#prog::-webkit-slider-thumb {-webkit-appearance: none;position: relative;background: var(--prog);top: calc(50% - 10px);cursor: pointer;z-index: 888;}

#prog::-webkit-slider-runnable-track { height: 2px; border-radius: 6px; background: var(--bgColor); }
#prog::-moz-range-track { height: 2px; border-radius: 10px; background: var(--bgColor); }
#cur { grid-area: cur; color: var(--color); }
#dur { grid-area: dur; color: var(--color); }
#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(0deg, #FFF000,#FFF000));position: absolute;font: normal 55px 华文隶书;color:#FF0000;white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 0px #000000);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { width: 0;} to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<style>
#photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
border:0px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}

@keyframes round{2% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
8% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0deg)scale(0.8)translate(10%,-10%);
opacity:1
}
10% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1
}
12% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(.8)translate(10%,-10%);
opacity:1
}

22% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
}

#photo:nth-child(1) {
animation-delay: 84s;
}
#photo:nth-child(2) {
animation-delay: 78s;
}
#photo:nth-child(3) {
animation-delay: 72s;
}
#photo:nth-child(4) {
animation-delay: 66s;
}
#photo:nth-child(5) {
animation-delay: 60s;
}
#photo:nth-child(6) {
animation-delay: 54s;
}
#photo:nth-child(7) {
animation-delay: 48s;
}
#photo:nth-child(8) {
animation-delay: 42s;
}
#photo:nth-child(9) {
animation-delay: 36s;
}
#photo:nth-child(10) {
animation-delay: 30s;
}
#photo:nth-child(11) {
animation-delay: 24s;
}
#photo:nth-child(12) {
animation-delay: 18s;
}
#photo:nth-child(13) {
animation-delay: 12s;
}
#photo:nth-child(14) {
animation-delay: 6s;
}
#photo:nth-child(15) {
animation-delay: 0s;
}



.stop #photo:nth-child(1) {
animation-play-state: paused;
}
.stop #photo:nth-child(2){
animation-play-state: paused;
}
.stop#photo:nth-child(3){
animation-play-state: paused;
}
.stop #photo:nth-child(4){
animation-play-state: paused;
}
.stop #photo:nth-child(5){
animation-play-state: paused;
}
.stop #photo:nth-child(6){
animation-play-state: paused;
}
.stop #photo:nth-child(7) {
animation-play-state: paused;
}
.stop #photo:nth-child(8) {
animation-play-state: paused;
}

.stop #photo:nth-child(9) {
animation-play-state: paused;
}
.stop #photo:nth-child(10) {
animation-play-state: paused;
}

.stop #photo:nth-child(11) {
animation-play-state: paused;
}
.stop #photo:nth-child(12) {
animation-play-state: paused;
}
.stop #photo:nth-child(13) {
animation-play-state: paused;
}
.stop #photo:nth-child(14) {
animation-play-state: paused;
}

.stop #photo:nth-child(15) {
animation-play-state: paused;
}
</style>

<div id="papa">
<div id="testImg" ><div id="items" >
<img alt="" id="photo" src="https://365.tf/disk/tf/1678401614.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678380740.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678378901.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678389584.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678423647.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678363407.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678420449.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678384334.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678367643.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678428686.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678371553.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678410791.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678371976.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678406107.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1678340356.jpg" />

</div> </div>

<div id="rotate-words">
<div>《拉萨夜雨》DJ<br />
<span>出品：焱鑫磊</span></div>

<div>作词：冰川飞狐<br />
<span>作曲：阿汝汗</span></div>

</div>
<div id="lrc" data-lrc="焱鑫磊博客">焱鑫磊博客</div>

<div id="mplayer"><span id="cur">00:00</span><span id="dur">00:00</span><divid="btn"> <span id="btnplay"></span></div><input type="range" id="prog" step="0.1" max="100" value="0" /></div>

</div>
<audio id="aud" src="https://365.tf/disk/tf/1678367181.mp3" loop autoplay></audio>

<script >
(function() {
        (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onmousedown = () =>mDrag =true;prog.onmouseout = () => mDrag = false;prog.onchange = () => { aud.currentTime = aud.duration * prog.value / 100; mDrag = false; };prog.onmousemove = () => prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);if(mDrag===false) prog.value = aud.currentTime / aud.duration * 100;for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
        (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
        let averAdd = 1, offset = 0;
        let geci = `《拉萨夜雨》DJ
词：冰川飞狐曲：阿汝汗
LRC歌词制作：焱鑫磊
耸入云天的路
连着记忆的湖
金光闪闪的殿堂
护佑虔诚的脚步
朵朵莲花盛开的佛前
感念着仁慈的光
祈祷思念的青藤
慢慢爬上牵梦的窗
拉萨午夜的细雨
淋响了心的铃铛
踏着晨钟暮鼓的召唤
在离你最近的路上
拉萨午夜的细雨
润泽了心的禅房
望着青灯古佛的身影
在想你面庞的夜晚
月光如水的夜
天空洒落着雨
青烟袅袅的梵唱
抚慰别离的惆怅
片片羽翼零落的霓裳
滴落着无言的伤
祈求三生的情缘
静静长在无忧的天堂
拉萨午夜的细雨
淋响了心的铃铛
踏着晨钟暮鼓的召唤
在离你最近的路上
拉萨午夜的细雨
润泽了心的禅房
望着青灯古佛的身影
在想你面庞的夜晚
耸入云天的路
连着记忆的湖
金光闪闪的殿堂
护佑虔诚的脚步
朵朵莲花盛开的佛前
感念着仁慈的光
祈祷思念的青藤
慢慢爬上牵梦的窗
拉萨午夜的细雨
淋响了心的铃铛
踏着晨钟暮鼓的召唤
在离你最近的路上
拉萨午夜的细雨
润泽了心的禅房
望着青灯古佛的身影
在想你面庞的夜晚
月光如水的夜
天空洒落着雨
青烟袅袅的梵唱
抚慰别离的惆怅
片片羽翼零落的霓裳
滴落着无言的伤
祈求三生的情缘
静静长在无忧的天堂
拉萨午夜的细雨
淋响了心的铃铛
踏着晨钟暮鼓的召唤
在离你最近的路上
拉萨午夜的细雨
润泽了心的禅房
望着青灯古佛的身影
在想你面庞的夜晚
月光如水的夜
天空洒落着雨
青烟袅袅的梵唱
抚慰别离的惆怅
片片羽翼零落的霓裳
滴落着无言的伤
祈求三生的情缘
静静长在无忧的天堂
拉萨午夜的细雨
淋响了心的铃铛
踏着晨钟暮鼓的召唤
在离你最近的路上
拉萨午夜的细雨
润泽了心的禅房
望着青灯古佛的身影
在想你面庞的夜晚
月光如水的夜
天空洒落着雨
青烟袅袅的梵唱
抚慰别离的惆怅
片片羽翼零落的霓裳
滴落着无言的伤
祈求三生的情缘
静静长在无忧的天堂
拉萨午夜的细雨
淋响了心的铃铛
踏着晨钟暮鼓的召唤
在离你最近的路上
拉萨午夜的细雨
润泽了心的禅房
望着青灯古佛的身影
在想你面庞的夜晚
拉萨午夜的细雨
淋响了心的铃铛
踏着晨钟暮鼓的召唤
在离你最近的路上
拉萨午夜的细雨
润泽了心的禅房
望着青灯古佛的身影
在想你面庞的夜晚
在想你面庞的夜晚
在想你面庞的夜晚
`;

        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 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));}
HCPlayer({
                lrcAr: getLrcAr(geci),
                lrc_css: '--bg: linear-gradient(#FFF000,#FFF000); top: 82%;',
                player_css: '--ww: 240px; right: 40%; bottom: 2%;',
btn_txt: '\&#10059',
        });

        FS({
                pa: papa,
                set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 10px; left: 20px;',
        });
})();
var image = document.getElementById("testImg"),
    button = document.getElementById("btn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}

items.style.animationPlayState = audr.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>items.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>items.style.animationPlayState = 'paused');

</script>

<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
max-width:800px;
left:0%;
margin:auto;
padding:20% 0;
font-size:3.5em;filter:drop-shadow(#000000 1px 1px 1px);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#fff000;
text-transform:lowercase;
opacity:0.8;
font-family: '华文隶书', sans-serif;
}

#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 36s linear 2 0s;
}

@keyframes rotate-word         {0% {
          opacity: 0;
          transform: translateY(-300%);
        }
        8% {
          opacity: 1;
          transform: translateY(0%);
        }
        17% {
          opacity: 1;
          transform: translateY(0%);
        }
        19% {
          opacity: 0;
          transform: translateY(100%);
        }
        25% { opacity: 0 }
        100% { opacity: 0 }
}
#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
#rotate-words div:nth-child(5) { animation-delay: 24s}
#rotate-words div:nth-child(6) { animation-delay: 30s}
</style>
<style type="text/css">#items {width: 100%;height: 100%;top:0px; left:0px;position: absolute; animation: slider 3s linear infinite ;}
.stop #items{animation-play-state: paused;}
@keyframes slider {0% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(241, 23, 18, 0.91) 86%); } 100% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);} }
</style>

庶民 发表于 2023-3-9 12:24

很好的作品，欣赏。

小辣椒 发表于 2023-3-9 14:01

欣赏精彩制作{:4_187:}

小辣椒 发表于 2023-3-9 14:01

谢谢分享{:4_171:}

樵歌 发表于 2023-3-9 15:21

焱大美女才艺双全呀。这都用代码集中了西藏所有的美景了。谢谢。{:4_187:}

樵歌 发表于 2023-3-9 15:22

你是后来居上，把代码玩得很光鲜亮丽。绝对是马教授得意门生{:4_199:}

红影 发表于 2023-3-9 15:53

好美的变色音画，图片轮播很有特色。歌曲好听，选取的图图都好美。欣赏焱鑫磊好帖{:4_199:}

焱鑫磊 发表于 2023-3-9 18:03

庶民 发表于 2023-3-9 12:24
很好的作品，欣赏。

向你问好！{:4_204:}

焱鑫磊 发表于 2023-3-9 18:04

小辣椒 发表于 2023-3-9 14:01
欣赏精彩制作

谢谢鼓励，学习中。{:4_176:}

焱鑫磊 发表于 2023-3-9 18:04

小辣椒 发表于 2023-3-9 14:01
谢谢分享

问好！

焱鑫磊 发表于 2023-3-9 18:05

樵歌 发表于 2023-3-9 15:21
焱大美女才艺双全呀。这都用代码集中了西藏所有的美景了。谢谢。

问好！{:4_204:}

焱鑫磊 发表于 2023-3-9 18:06

樵歌 发表于 2023-3-9 15:22
你是后来居上，把代码玩得很光鲜亮丽。绝对是马教授得意门生

学习中，谢谢鼓励！{:4_204:}

焱鑫磊 发表于 2023-3-9 18:07

红影 发表于 2023-3-9 15:53
好美的变色音画，图片轮播很有特色。歌曲好听，选取的图图都好美。欣赏焱鑫磊好帖

谢谢领路人红影鼓励帮助。{:4_204:}

樵歌 发表于 2023-3-9 19:27

焱鑫磊 发表于 2023-3-9 18:05
问好！

喝酒{:4_176:}

樵歌 发表于 2023-3-9 19:28

焱鑫磊 发表于 2023-3-9 18:06
学习中，谢谢鼓励！

我看就你最能了{:4_187:}

红影 发表于 2023-3-10 11:18

焱鑫磊 发表于 2023-3-9 18:07
谢谢领路人红影鼓励帮助。

呵呵，我咋成了领路人？我自己都不知道啊{:4_173:}
页: [1]
查看完整版本: 《拉萨夜雨》DJ（试发代码帖）