朵拉 发表于 2024-1-28 23:12

Baddie（马黑黑原创）

本帖最后由 朵拉 于 2024-1-28 23:16 编辑 <br /><br /><style>
.mybox { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 685px; background: url('https://pic.imgdb.cn/item/65b66efc871b83018a25de41.jpg'); 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: 300px; height: 300px; object-fit: cover; border-radius: 50%; opacity: 1; mix-blend-mode: lighten; }
#mplayer { position: absolute; bottom: 10px; width: 300px; text-align: center; color: lightyellow; }
#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: 60px; height: 60px; 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=2090616213" autoplay loop></audio>
    <video src="https://img.tukuppt.com/video_show/2269348/00/01/91/5b4d5e7a6b4a6.mp4" loop></video>
    <div id="mplayer" data-tt="0:00 0:00">
      <img id="btnplay" src="https://638183.freep.cn/638183/small/mufuz2.jpg" alt="" title="播放/暂停" /><br>
      <input id="mprog" type="range" min="0" max="100" step="any" value="0" />
    </div>
</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-1-28 23:18

@马黑黑
马师 晚上好，学生交作业，请指正哈{:4_190:}

红影 发表于 2024-1-28 23:30

漂亮，欣赏朵宝好帖{:4_204:}

梦油 发表于 2024-1-29 10:20

欣赏佳作，问候朵拉。

马黑黑 发表于 2024-1-29 17:03

朵拉 发表于 2024-1-28 23:18
@马黑黑
马师 晚上好，学生交作业，请指正哈

我噻，电老虎变种{:4_170:}
页: [1]
查看完整版本: Baddie（马黑黑原创）