绿叶清舟 发表于 2023-3-5 20:43

The Shadow of the Past

本帖最后由 绿叶清舟 于 2023-3-8 21:15 编辑 <br /><br /><style>
#papa {
      --state: paused; --deg: 1turn;
      margin: -80px 0 0 calc(50% - 633px);
      display: grid;
      place-items: center;
      width: 1100px;
      height: 700px;
      background: lightblue url('https://pic.imgdb.cn/item/640487e0f144a01007ab0f73.jpg') no-repeat center/cover;
      box-shadow: 6px 3px 20px #000;
      user-select: none;
      position: relative;
      z-index: 1;
}
#btnFs {
      position: absolute;
      bottom: 20px;
      width: fit-content;
      height: fit-content;
      padding: 6px;
      border-radius: 6px;
      border: 2px solid lightblue;
      color: lightblue;
      text-shadow: 1px 1px 1px #000;
      display: none;
      cursor: pointer;
}
#mplayer {
      margin: 200px auto;
      background: tan;
      box-shadow: -10px -10px 30px black inset;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      cursor: pointer;
      animation: rot linear 3s infinite var(--state);
      position: relative;
}
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
      width: 40px;
      height: 40px;
      top: 50px;
      box-shadow:
                100px 100px 30px #846838,
                -100px 100px 30px #1a130b,
                100px -100px 30px #322715,
                -100px -100px 30px #ef7416;
      animation: rot linear 3s infinite var(--state);
}
#mplayer::after { --deg: -2turn; top: -50px; }


#mp {
      position: absolute;
      bottom: 330px;
      mix-blend-mode: multiply;
      animation: root linear 3s infinite var(--state);
      
      
}
@keyframes root {from{ transform: rotateY(360deg); }to { transform: rotateY(-360deg); } }
@keyframes rot { to { transform: rotate(var(--deg)); } }

</style>

<div id="papa">
       <div id="mplayer"> </div><imgid="mp" src="https://pic.imgdb.cn/item/6404899bf144a01007ad72d0.png" alt="" />
      <div id="btnFs">全屏观赏</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1944209341.mp3" autoplay loop></audio>
</div>

<script>
(function() {
      let fs = false, timerId;

      let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('play', () => mState());
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('ended', () => playNext());
      papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
      });
      btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
      document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>

阿狄丽娜 发表于 2023-3-5 20:59

中间的小人能转吗？

马黑黑 发表于 2023-3-5 21:04

这个有创意

红影 发表于 2023-3-5 21:06

清舟这个设计巧妙，让一个小人儿站在了那个球球上呢，非常有趣{:4_187:}

醉美水芙蓉 发表于 2023-3-5 21:09

红影 发表于 2023-3-5 21:23

清舟总能有美妙的构思，好棒{:4_187:}

马黑黑 发表于 2023-3-5 21:25

过去的阴影

庶民 发表于 2023-3-6 04:38


让我们在欣赏的同时得到一种享受。

绿叶清舟 发表于 2023-3-8 21:15

阿狄丽娜 发表于 2023-3-5 20:59
中间的小人能转吗？

转了

绿叶清舟 发表于 2023-3-8 21:15

庶民 发表于 2023-3-6 04:38
让我们在欣赏的同时得到一种享受。

谢谢庶民支持

绿叶清舟 发表于 2023-3-8 21:16

醉美水芙蓉 发表于 2023-3-5 21:09
清舟厉害！做得漂亮！

谢谢芙蓉支持，节日快乐

绿叶清舟 发表于 2023-3-8 21:16

红影 发表于 2023-3-5 21:23
清舟总能有美妙的构思，好棒

谢谢影，节日快乐

绿叶清舟 发表于 2023-3-8 21:17

马黑黑 发表于 2023-3-5 21:04
这个有创意

整了老半天的，光看上面是左右晃的{:4_189:}

马黑黑 发表于 2023-3-8 21:25

绿叶清舟 发表于 2023-3-8 21:17
整了老半天的，光看上面是左右晃的

也没事

红影 发表于 2023-3-8 23:09

绿叶清舟 发表于 2023-3-8 21:16
谢谢影，节日快乐

抱抱清舟，一起快乐{:4_179:}

阿狄丽娜 发表于 2023-3-9 15:35

绿叶清舟 发表于 2023-3-8 21:15
转了

厉害！还是转的好看。

大猫咪 发表于 2023-3-15 22:00

现在听真舒服好听好看清舟好分享 制作真创意点赞！~

{:4_204:}{:4_199:}{:4_190:}
页: [1]
查看完整版本: The Shadow of the Past