南无月 发表于 2024-3-2 17:51

【黑师代码】乘风（学习黑师《空巷》无歌词播放效果）


<style>
.mybox { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://pic.imgdb.cn/item/65bb5195871b83018a1b8c69.webp'); box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; display: grid; place-items: center; }
.mybox video { position: absolute; bottom: 0px; width: 1700px; height: 900px; object-fit: cover; border-radius: 50%; opacity: 1; mix-blend-mode: screen; opacity: .36;}
#mplayer { position: absolute; bottom: 10px; width: 300px; text-align: center; color: lightyellow; z-index:9;}
#mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 25px; width: 100%; text-align-last: justify; }
#mprog { width: 100%; accent-color: lightyellow; opacity: .9; outline: none; cursor: pointer; }
#btnplay { width:90px; height: 90px; clip-path: circle(48%); opacity: .7; transition: filter .65s; cursor: pointer; animation: rot 5s linear infinite var(--state); }
#btnplay:hover { filter: hue-rotate(300deg); }
@keyframes rot { to { transform: rotate(360deg);} }
</style>

<div class="mybox">
    <audio src="https://music.163.com/song/media/outer/url?id=2428557" autoplay loop></audio>

    <div id="mplayer" data-tt="0:00 0:00">
      <img id="btnplay" src="https://pic.imgdb.cn/item/65bb3fac871b83018ae1a058.png" alt="" title="播放/暂停" /><br>
      <input id="mprog" type="range" min="0" max="100" step="any" value="0" />
    </div>
      <video src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1caa11c20fb.mp4" loop></video>
</div>

<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/mpku.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
</script>

南无月 发表于 2024-3-2 17:52

@马黑黑 老师来瞧瞧，这个不用改了吧

南无月 发表于 2024-3-2 17:52

超额完成{:4_173:}

马黑黑 发表于 2024-3-2 17:53

南无月 发表于 2024-3-2 17:52
@马黑黑 老师来瞧瞧，这个不用改了吧

非常好，不用改，除非出大错{:4_170:}

小文 发表于 2024-3-2 18:56

非常宏大，厉害！

樵歌 发表于 2024-3-2 19:01

图意辽阔，学霸岀品必属精品！

小辣椒 发表于 2024-3-2 21:11

欣赏月儿好制作{:4_171:}

南无月 发表于 2024-3-2 21:26

马黑黑 发表于 2024-3-2 17:53
非常好，不用改，除非出大错

有大错的好象到不了这里，半路就被修理了{:4_173:}

南无月 发表于 2024-3-2 21:27

小文 发表于 2024-3-2 18:56
非常宏大，厉害！

感谢小文临贴支持。

南无月 发表于 2024-3-2 21:27

樵歌 发表于 2024-3-2 19:01
图意辽阔，学霸岀品必属精品！

谢谢樵管支持鼓励。。

南无月 发表于 2024-3-2 21:27

小辣椒 发表于 2024-3-2 21:11
欣赏月儿好制作

小辣椒来了开心哦。。{:4_187:}

马黑黑 发表于 2024-3-2 21:44

南无月 发表于 2024-3-2 21:26
有大错的好象到不了这里，半路就被修理了

那挺好

南无月 发表于 2024-3-3 21:17

马黑黑 发表于 2024-3-2 21:44
那挺好

{:4_190:}

樵歌 发表于 2024-3-4 21:08

南无月 发表于 2024-3-2 21:27
谢谢樵管支持鼓励。。

又谦虚了{:4_190:}
页: [1]
查看完整版本: 【黑师代码】乘风（学习黑师《空巷》无歌词播放效果）