老谟深虑 发表于 2022-10-30 17:54

《寂寞黄昏》

<style>
#papa { margin: 30px; width: 1024px; height: 600px; background: #000000 url('https://') no-repeat center/cover; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; position: relative;z-index: 1; }
#papa > div { position: relative; display: grid; }
.pTop { grid-area: top; place-items: end start; }
.pMid { grid-area: mid; place-items: end center;bottom: 180px; }
.pFoot { grid-area: foot; place-items: center;bottom: 40px; }
#mplayer { position: absolute; width: 400px; height: 60px; font: normal 14px sans-serif; z-index: 9; }
#mplayer::before, #mplayer::after { position: absolute; width: 100%; height: 50%; color: snow; margin: 15px 0; }
#mplayer::before { content: attr(data-cur); }
#mplayer::after { content: attr(data-dur); text-align: right; }
#btnplay { position: absolute; left: -80px; bottom: 0px; width: 60px; height: 60px; border-radius: 0%;background: url('http://pan.yinhuabbs.cn/view.php/2da9f8fb707ddc142381963a5d71f8ca.png')0 0/100% 100%; cursor: pointer; z-index: 2; animation: rot linear 4s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}
#prog { --posX: 0px; position: absolute; bottom: 20px; width: 100%; height: 1px; background: #eee; cursor: pointer; z-index: 2;}
#prog::before, #prog::after { position: absolute; content: ''; left: 0; }
#prog::before { width: var(--posX); height: 1px; background: red; }
#prog::after { left: var(--posX); top: calc(50% - 5px); width: 3px; height: 10px; background: silver; z-index: 2;}
#tit { position: absolute; bottom: 20px; right: 30px;font: bold 3em sans-serif;text-shadow: 2px 2px 3px #212121; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute;right: 250px; transform:perspective(300px)rotateY(40deg);font:bold 40px/1.8 georgia,sans-serif;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 20%,rgba(255,255,255,.5));
         color:#800000 ; -webkit-background-clip: text; filter: drop-shadow(0px 0px 10px #FFF000)drop-shadow(0px 0px 10px #FF0000)drop-shadow(0px 0px 10px #00FFFF); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;background: linear-gradient(23deg, #FA0000 0%,#73FF00 100%); filter: drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0)hue-rotate(0deg)contrast(120%)brightness(200%); -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%; } }
@keyframes rot {
50% { transform: rotateX(0deg) rotateY(180deg) rotate(0deg)scale(1);filter: hue-rotate(360deg)}}


#mpic {
      position: absolute;
      transform: rotateY(0deg);
      top: 0px;
      left: 0px;
      width: 1024px;
      height: 600px;
      animation: rote 80s linear infinite;
      cursor: pointer;
      opacity: 1;
}


@keyframes rote {
      from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
      }


      to {
                background-position: -1600px 300px;
      }
}


#mpic1 {
      position: absolute;
      transform: rotateY(0deg);
      top: 0px;
      left: 0px;
      width: 1024px;
      height: 600px;
      animation: rotet 100s linear infinite;
      cursor: pointer;
      opacity: 1;
}


@keyframes rotet {
      from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
      }


      to {
                background-position: 0px -1600px;
      }
}
#items
{position: absolute;
      width: 100%;
      height: 100%;
top: 0px;
      left: 0px;opacity: 1;
animation: slider 0.1s linear infinite;
}


@keyframes slider
{
      from
      {
                opacity: 1;
                filter: hue-rotate(360deg)contrast(120%)brightness(100%);
      }


      to
      {
                opacity: 1;
                filter: hue-rotate(0deg)contrast(140%)brightness(100%);
      }
}


</style>


<div id="papa">


      <divid="items"><div class="pTop"style="mix-blend-mode: multiply;background:url('http://pan.yinhuabbs.cn/view.php/e7c78a5e268fab9bda6242dbc507d460.jpg') no-repeat center/cover;width: 1024px; height: 600px;" /></div></div>
<imgid="mpic"style="width: 100%; height: 100%;background: url('http://pan.yinhuabbs.cn/view.php/f87d2b5dfe272eb91ddc45e6e9436478.png')0 0/50% 70%" >
<imgid="mpic1"style="width: 100%; height: 100%;background: url('http://pan.yinhuabbs.cn/view.php/f87d2b5dfe272eb91ddc45e6e9436478.png')0 0/30% 40%" >
      <div class="pMid"><span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span></div>
       <div class="pFoot">
                <div id="mplayer" data-cur="00:00" data-dur="00:00"><span id="prog"></span><span id="btnplay"></span></div>
      </div>
</div>


<script>
(function() {
      let mKey = 0, mFlag = true, aud = new Audio();
      aud.src = 'https://link.hhtjim.com/kw/36875883.mp3';
      aud.autoplay = true;
      aud.loop = true;
let lrcAr = [
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      
];
mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');


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




mpic1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic1.style.animationPlayState = 'paused');
      if (aud.paused) btnplay.style.animationPlayState = 'paused';
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      mplayer.onmousemove = (e) => {mplayer.style.cursor = e.offsetY > mplayer.offsetHeight / 1.5 ? 'pointer' : 'default';}
      mplayer.onclick = (e) => {if (e.offsetY > mplayer.offsetHeight / 1.5) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('seeked', () => calcKey());
      aud.addEventListener('timeupdate', () => {prog.style.setProperty('--posX', prog.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.cur = toMin(aud.currentTime);mplayer.dataset.dur = toMin(aud.duration);for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
      let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;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 < 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; };
      papa.oncontextmenu = () => false;
})();
</script>

巫荣云师 发表于 2022-10-30 21:23

欣赏老师佳作。点赞！

非常开心 发表于 2022-10-30 22:10

欣赏楼主的新作，点赞多谢分享！

蓝魔 发表于 2022-10-30 23:06

欣赏一下，谢谢。

蓝魔 发表于 2022-10-30 23:10


这是一个重复贴，和音乐区的帖子是一样的：http://www.yinhuabbs.cn/forum.php?mod=viewthread&tid=246995&extra=page%3D1

这个帖子到底是谁的啊？

195400 发表于 2022-10-30 23:21

蓝魔 发表于 2022-10-30 23:10
这是一个重复贴，和音乐区的帖子是一样的：http://www.yinhuabbs.cn/forum.php?mod=viewthread&tid=24699 ...
谁的在前？

看这里就可以做出判断 http://keai99.com/forum.php?mod=viewthread&tid=545945&highlight=%BC%C5%C4%AF%BB%C6%BB%E8

老谟深虑 发表于 2022-10-31 08:13

蓝魔 发表于 2022-10-30 23:10
这是一个重复贴，和音乐区的帖子是一样的：http://www.yinhuabbs.cn/forum.php?mod=viewthread&tid=24699 ...

   老师您好，这个帖子的图片是我制作的，我是学习焱鑫磊老师的代码制作的，我发给了焱鑫磊老师请教如何打包html。焱鑫磊老师帮我打包了。所以我就发表试一下。

老谟深虑 发表于 2022-10-31 08:19

巫荣云师 发表于 2022-10-30 21:23
欣赏老师佳作。点赞！

      谢谢老师的欣赏和鼓励，上午好！

老谟深虑 发表于 2022-10-31 08:20

非常开心 发表于 2022-10-30 22:10
欣赏楼主的新作，点赞多谢分享！

       谢谢老师的欣赏和鼓励，上午好！

老谟深虑 发表于 2022-10-31 08:21

蓝魔 发表于 2022-10-30 23:06
欣赏一下，谢谢。

      谢谢老师的欣赏，问好！
页: [1] 2
查看完整版本: 《寂寞黄昏》