绿叶清舟 发表于 2022-7-8 21:52

情书---张学友


<style>
#papa { left: -202px; padding: 0; width: 1000px; height: 700px; background: #eee url('https://pic.imgdb.cn/item/62c83234f54cd3f9376ecfa4.jpg') no-repeat center/cover; box-shadow: 4px 4px 30px #000; border-radius: 6px; position: relative; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
#playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; background: transparent; border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox::before { position: absolute; content: ''; margin: -20px; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,255,255,.45); filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
#stage { position: absolute; left: calc(50% - 200px); top: calc(50% - 200px); width: 400px; height: 400px; padding: 0; margin: 0;}
#stage::before { position: absolute; content: ''; left: -5px; top: -5px; bottom: -5px; right: -5px; box-shadow: 2px 2px 12px #000; transform: rotate(45deg);border-radius: 58px;}
.piece {
      position: absolute;
      padding: 0;
      margin: 0;
      border:1px solid transparent;
}

@keyframes in {
      80% { transform: scale(1) rotate(0); opacity: 1; }
      100% { transform: scale(0) rotate(-360deg); opacity: 0; }
}
@keyframes out {
      85% { transform: scale(1) rotate(0); opacity: 1; }
      100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

</style>

<div id="papa">
      <div id="stage"></div>
      <div id="playbox">
                <p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">0%</span>
                </p>
      </div>
      <audio id="aud" src="http://music.163.com/song/media/outer/url?id=1927364155.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
let picAr = [
      'https://pic.imgdb.cn/item/62c8149bf54cd3f9373d3df4.jpg',
      'https://pic.imgdb.cn/item/62c814b2f54cd3f9373d5d46.jpg',
      'https://pic.imgdb.cn/item/62c814c5f54cd3f9373d7751.jpg',
      'https://pic.imgdb.cn/item/62c814e0f54cd3f9373d9922.jpg',
      'https://pic.imgdb.cn/item/62c814f6f54cd3f9373db463.jpg',
];
let lrcAr = [
      ['0.00','曲名: 情书'],
      ['20.00','歌手：张学友'],
      ['60.00','所属专辑：单身情人节'],
      ['170.00','感谢欣赏']
];
let ww = stage.clientWidth,
      hh = stage.clientHeight;
let piecesX = 5,
      piecesY = 5,
      flag = 1,
      idx = 0,
      slip = 0;
let pw = ww / piecesX;
let ph = hh / piecesY;
let bgar = new Array;

      for(j=0; j<piecesY; j++) {
                for(k=0; k<piecesX; k++) {
                        let piece = document.createElement('span');
                        piece.className = 'piece';
                        piece.style.width = pw + 'px'
                        piece.style.height = ph + 'px';
                        piece.style.left = k * pw + 'px';
                        piece.style.top = j * ph + 'px';
                        bgar.push(k * pw + '|' + j * ph); //记录背景数据
                        stage.appendChild(piece);
                }
      }


let pieces = document.querySelectorAll('.piece');

function out_in() {
      pieces.forEach((ele,key) => {
                let ar = bgar.split('|');
                ele.style.background = 'url(' + picAr + ') -' + ar+ 'px' + ' -' + ar + 'px no-repeat';
                flag == 1 ? (ele.style.animation = 'out 8s 1s', flag = 0) : (ele.style.animation = 'in 8s 1s', flag = 1);
      });
      idx ++;
      if(idx > picAr.length - 1) idx = 0;
      setTimeout(out_in,9000);
}

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
      let prog = 100 * aud.currentTime / aud.duration;
      slider.value = prog;
      per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
      }
});

let toMin = (sec) => {
      if(!sec) return '0:00';
      sec = parseInt(sec);
      return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}

out_in();

</script>

四海八荒 发表于 2022-7-8 21:55

沙发

四海八荒 发表于 2022-7-8 21:57

看情书听情歌{:4_173:}

马黑黑 发表于 2022-7-8 22:00

貌似很温馨的样纸

绿叶清舟 发表于 2022-7-8 22:05

四海八荒 发表于 2022-7-8 21:57
看情书听情歌

不能偷看的啊{:4_189:}

绿叶清舟 发表于 2022-7-8 22:06

马黑黑 发表于 2022-7-8 22:00
貌似很温馨的样纸

本来想换个心形的，可是只能用背景色的，加了阴影中间就会多了二条线的

马黑黑 发表于 2022-7-8 22:07

绿叶清舟 发表于 2022-7-8 22:06
本来想换个心形的，可是只能用背景色的，加了阴影中间就会多了二条线的

没关系的，无心亦可

红影 发表于 2022-7-8 22:07

到底会PS的好，清舟的这个制作好美啊{:4_187:}

绿叶清舟 发表于 2022-7-8 22:12

马黑黑 发表于 2022-7-8 22:07
没关系的，无心亦可

只能图片里加了

马黑黑 发表于 2022-7-8 22:12

绿叶清舟 发表于 2022-7-8 22:12
只能图片里加了

加个也好

绿叶清舟 发表于 2022-7-8 22:13

红影 发表于 2022-7-8 22:07
到底会PS的好，清舟的这个制作好美啊

以后想要啥告诉俺{:4_173:}

小辣椒 发表于 2022-7-8 23:30

清舟借-张学友的情书，顺便向谁告白呢{:4_170:}

樵歌 发表于 2022-7-9 08:04

猛一看貌似写给张天王的情书呢，再一听，还真是情书{:4_189:}

绿叶清舟 发表于 2022-7-9 11:30

小辣椒 发表于 2022-7-8 23:30
清舟借-张学友的情书，顺便向谁告白呢

亲自告白，这么可怜的事打S也不做了{:4_189:}

绿叶清舟 发表于 2022-7-9 11:31

樵歌 发表于 2022-7-9 08:04
猛一看貌似写给张天王的情书呢，再一听，还真是情书

就是真的情书了{:4_189:}

大猫咪 发表于 2022-7-9 11:33

清舟好创意！ 制作真漂亮，赞！特别喜欢歌神的经典，周末快乐{:4_204:}{:4_179:}

绿叶清舟 发表于 2022-7-9 11:57

大猫咪 发表于 2022-7-9 11:33
清舟好创意！ 制作真漂亮，赞！特别喜欢歌神的经典，周末快乐

猫周末好，不知道做啥的了，就去找他的歌还容易找到些感觉的

大猫咪 发表于 2022-7-9 11:59

嗯现在的歌能听的很少，经典还是歌神那年代好听！{:4_204:}

绿叶清舟 发表于 2022-7-9 12:01

大猫咪 发表于 2022-7-9 11:59
嗯现在的歌能听的很少，经典还是歌神那年代好听！

是啊，新歌怎么听都做不出来了，纯堆图的不会玩啊

大猫咪 发表于 2022-7-9 12:03

绿叶清舟 发表于 2022-7-9 12:01
是啊，新歌怎么听都做不出来了，纯堆图的不会玩啊

嗯   一点感觉没有现在的歌
页: [1] 2
查看完整版本: 情书---张学友