朵拉 发表于 2023-5-22 23:33

电梯战神（马黑黑原创）

本帖最后由 朵拉 于 2024-11-24 01:31 编辑 <br /><br /><style>
#papa {
      left: -200px;
      width: 1024px;
      height: 640px;
      background: url('https://pic1.imgdb.cn/item/646b8b70e03e90d874424376.jpg') center/cover no-repeat;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1;
}
#wrap {
      position: absolute;
      right: 10px;
      bottom: 10px;
      width: 240px;
      height: 240px;
      cursor: pointer;
      --deg: -15deg;
}
#wrap::before, #wrap::after {
      position: absolute;
      content: '';
}
#wrap::before {
      width: 200px;
      height: 200px;
      background: url('https://638183.freep.cn/638183/t23/btn/ihvf.png') center/cover no-repeat;
      top: -12px;
      right: -12px;
      transition: .12s;
      transform-origin: 180px 20px;
      transform: rotate(var(--deg));
      z-index: 10;
      animation: var(--chg);
}
#wrap::after {
      content: attr(data-tt);
      width: 100%;
      text-align: center;
      color: red;
}
#pan {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
      background-size: 50% 100%, 100% 50%, 100% 100%;
      bottom: 0;
      position: absolute;
      animation: rot 6s infinite linear var(--state);
      --state: paused;
}
#pan::before {
      position: absolute;
      content: '';
      top: 50%; left: 50%;
      margin: -35px;
      border: solid 1px #d9a388;
      width: 68px; height: 68px;
      border-radius: 50%;
      box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
      background: #b5ac9a;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
      <div id="wrap" title="点击运行" data-tt="00:00 | 00:00">
                <div id="pan"></div>
      </div>
</div>
<audio id="aud" src="https://www.kumeiwp.com/wj/224980/2024/11/22/f0bd8ac76c4a3d423287422197418b6f.mp3" autoplay="" loop=""></audio>

<script>
let mState = () => aud.paused ? (pan.style.setProperty('--state', 'paused'), wrap.style.setProperty('--deg','-15deg')) : pan.style.setProperty('--state', 'running');
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;
};
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
      let angle = -3 + (aud.currentTime * 28 / aud.duration || 0);
      wrap.style.setProperty('--deg', angle + 'deg');
      wrap.dataset.tt = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
</script>

朵拉 发表于 2023-5-22 23:38

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

朵拉 发表于 2023-5-22 23:39

且听且珍惜~~{:4_173:}

马黑黑 发表于 2023-5-23 07:43

朵拉 发表于 2023-5-22 23:38
@马黑黑
马师 晚上好，学生交作业，请指正

完美{:4_190:}

红影 发表于 2023-5-23 09:15

制作很漂亮。欣赏朵宝好帖{:4_204:}

梦缘 发表于 2023-5-23 11:06

很劲爆的曲子，欣赏点赞！{:4_178:}
页: [1]
查看完整版本: 电梯战神（马黑黑原创）