套用黑黑老师代码《迷茫》

千羽发表于 2022-11-18 19:57

本帖最后由千羽于 2022-11-18 21:10 编辑 <br /><br /><style>
#papa {
   margin: 0 0 0 calc(50% - 721px);
   width: 1280px;
   height: 800px;
   background: lightblue url('https://pic.imgdb.cn/item/63777ca316f2c2beb1135508.jpg') no-repeat;
   box-shadow: 3px 3px 20px #000;
   display: grid;
   place-items: center;
   user-select: none;
   position: relative;
   z-index: 1;
}
#mplayer {
   position: absolute;
   display: grid;
   grid-template-areas:
            'cur btnplay dur'
            'prog prog prog';
   gap: 0 4px;
   place-items: end center;
   font-size: 14px;
   bottom: 20px;
}
#cur { grid-area: cur; color: purple; }
#dur { grid-area: dur; color: purple; }
#btnplay {
   grid-area: btnplay;
   display: grid;
   grid-auto-flow: column;
   place-items: end center;
   gap: 0 4px;
   height: 60px;
   cursor: pointer;
}
#btnplay > span {
   background: red;
   width: 2px;
   transition: .3s;
}
#prog {
   grid-area: prog;
   width: 300px;
   height: 16px;
   opacity: .65;
   cursor: pointer;
   position: relative;
}

</style>

<div id="papa">
   <div id="mplayer">
            <div id="cur">00:00</div>
            <div id="btnplay"></div>
            <div id="dur">00:00</div>
            <progress id="prog" max="100"></progress>
   </div>
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29336189.mp3" loop autoplay></audio>
   <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 100px; top: 120px; left: 386px;" />
   <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 60px; top: 250px; left: 620px; transform: rotate(-60deg);" />
   <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 45px; top: 360px; left: 286px; transform: rotate(-35deg);" />
</div>

<script>
(function() {
   (function() {
            for(j=0; j<20; j++) {
                     let pinpu = document.createElement('span');
                     pinpu.className = 'pinpu';
                     pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
                     btnplay.appendChild(pinpu);
            }
   })();
   btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
   prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
   aud.addEventListener('timeupdate', () => {
            prog.value = aud.currentTime / aud.duration * 100;
            cur.innerText = toMin(aud.currentTime);
            dur.innerText = toMin(aud.duration);
            setPinpu();
   });

   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 setPinpu = ()=> {
            let eles = document.querySelectorAll('.pinpu');
            eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
   };
})();
</script>

闲言不语 发表于 2022-11-18 19:57

https://pic.imgdb.cn/item/5fddc7c33ffa7d37b383b033.gif{:4_334:}

千羽发表于 2022-11-18 19:58

背景图太单调了{:4_181:}

闲言不语 发表于 2022-11-18 19:59

杀了个花，我容易吗我{:4_397:}

闲言不语 发表于 2022-11-18 20:00

天地一抹蓝，美女在沉思{:4_199:}

千羽发表于 2022-11-18 20:01

闲言不语发表于 2022-11-18 19:59
杀了个花，我容易吗我

问好不语{:4_187:}老师

闲言不语 发表于 2022-11-18 20:01

swf定位真准{:4_199:}

千羽发表于 2022-11-18 20:02

闲言不语发表于 2022-11-18 20:01
swf定位真准

俺没认真去找合适的背景图{:4_203:}

闲言不语 发表于 2022-11-18 20:06

千羽发表于 2022-11-18 20:02
俺没认真去找合适的背景图

信手拈来，比特意雕琢更美！{:4_204:}

千羽发表于 2022-11-18 20:07

闲言不语发表于 2022-11-18 20:06
信手拈来，比特意雕琢更美！

这个信手拈来效果不好{:4_173:}

闲言不语 发表于 2022-11-18 20:10

千羽发表于 2022-11-18 20:07
这个信手拈来效果不好

俺说好，它就好，千羽出品就是好！{:4_397:}

千羽发表于 2022-11-18 20:12

闲言不语发表于 2022-11-18 20:10
俺说好，它就好，千羽出品就是好！

谢谢不语老师鼓励哦{:4_187:}

风吟发表于 2022-11-18 20:12

姑娘那么小样呀。

马黑黑 发表于 2022-11-18 20:13

嗯，底图还需下点功夫，不过布局构思很赞

千羽发表于 2022-11-18 20:16

风吟发表于 2022-11-18 20:12
姑娘那么小样呀。

这是以前做的图，想另外找图又有点懒了{:4_173:}

千羽发表于 2022-11-18 20:18

马黑黑发表于 2022-11-18 20:13
嗯，底图还需下点功夫，不过布局构思很赞
没有布啥局啊，我再去找个底图试试{:4_181:}

闲言不语 发表于 2022-11-18 20:19

风吟发表于 2022-11-18 20:12
姑娘那么小样呀。

揉揉老花眼，这是风妹子{:4_199:}

红影发表于 2022-11-18 20:54

很清新的画面。羽儿也用了三只小蝴蝶呢，一只在肩上，还把一只放在了播放器上。真漂亮{:4_187:}

千羽发表于 2022-11-18 20:56

红影发表于 2022-11-18 20:54
很清新的画面。羽儿也用了三只小蝴蝶呢，一只在肩上，还把一只放在了播放器上。真漂亮

我要换个背景图{:4_181:}

马黑黑 发表于 2022-11-18 21:11

千羽发表于 2022-11-18 20:18
没有布啥局啊，我再去找个底图试试

学 @东篱闲人，先喝水，再作图，这样做出的图细腻、深厚，还能柔情似水

页: [1] 2

花潮论坛's Archiver

套用黑黑老师代码《迷茫》