朵拉 发表于 2024-2-8 22:45

龙醒东方（马黑黑原创）

本帖最后由 朵拉 于 2024-2-8 23:05 编辑 <br /><br /><style>
#mydiv {
      margin: 0 0 0 calc(50% - 593px);
      position: relative;
      display: grid;
      place-items: center;
      width: 1024px;
      height: 678px;
      background: url('https://pic.imgdb.cn/item/65c4e9e09f345e8d03630824.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 12px #000;
      z-index: 1;
}
#myplayer {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      cursor: pointer;
      object-fit: cover;
      -webkit-mask: url('https://638183.freep.cn/638183/web/svg/6star.svg') repeat 50% 50%;
      -webkit-mask-size: 1% 1%;
      animation: masksize 20s infinite alternate var(--state);
}
@keyframes masksize {
      to { -webkit-mask-size: 160% 160%; }
}
</style>

<div id="mydiv">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2031112103" autoplay loop></audio>
      <img id="myplayer" alt="" title="播放/暂停" src="https://pic.imgdb.cn/item/65c4ed119f345e8d036ff504.jpg" />
</div>

<script>
var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
myplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2024-2-8 23:05

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

马黑黑 发表于 2024-2-9 08:39

{:4_199:}

亦是金 发表于 2024-2-9 09:43

{:5_116:}

世外桃源 发表于 2024-2-9 14:29

{:4_199:}

红影 发表于 2024-2-9 15:28

欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 龙醒东方（马黑黑原创）