论坛 › 欢乐水吧 › 离别的车站（学习黑黑同心圆播放器）

红影 发表于 2023-2-17 21:10

离别的车站（学习黑黑同心圆播放器）

<style>
#papa {
      margin: 80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 576px;
      background: darkblue url('https://pic.imgdb.cn/item/63ef27bef144a01007425990.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1;
}
#papa::before {
      content: '';
      position: absolute;
      width: 400px;
      height: 400px;
      background: url('https://pic.imgdb.cn/item/63ef6d44f144a01007d09d71.gif') no-repeat center/cover;
      left:140px; top: 200px;opacity: .95;
}
#mplayer {
      --angle1: 0;
      --angle2: 360deg;
      --state: paused;
      left: 48%;
      top: 26%;
      width: fit-content;
      height: fit-content;
      position: relative;
      width: 280px;
      height: 280px;
      background: url('https://pic.imgdb.cn/item/63ef3c05f144a0100769b1d3.png') no-repeat center/cover;
      cursor: pointer;
      animation: rot 10s linear infinite var(--state);
}
#mplayer::before, #mplayer::after {
      --angle1: 360deg;
      --angle2: 0;
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: url('https://pic.imgdb.cn/item/63ef3afff144a01007670299.png') no-repeat center/cover;
      animation: rot 6s linear infinite;
      animation-play-state: var(--state);
}
#mplayer::after {
      --angle1: 0;
      --angle2: 360deg;
      background: url('https://pic.imgdb.cn/item/63ef3b1df144a010076752a3.png') no-repeat center/cover;
      animation-duration: 16s;
}
@keyframes rot {
      0% { transform: rotate(var(--angle1)); }
      100% { transform: rotate(var(--angle2)); }
}
#tit {
      position: absolute;
      width: fit-content;
      height: fit-content;
      left: 100px;
      bottom: 220px;
      color: Orchid;
      font: bold 42px/50px 'FangSong',serif;
}
.mysp {
      position: relative;
      display: block;
}

@keyframes move {
      0% {left: 10px;transform: rotate(0); color: blue; }
      50% {left: 110px;transform: rotate(0deg) scale(1.4); color: Gold; }
      100% {left: 10px;transform: rotate(360deg); color: green; }
}
</style>
<div id="papa">
      <div id="mplayer"></div><div id="tit"></div>
      <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/04/04/ece9958e71ab1e0acad7614184b86839.mp3" loop autoplay></audio>
</div>

<script>
(function() {
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
let spans = [],idx = 0, last = null;

      [...'离别的车站'].forEach((item,key) => {
                let sp = document.createElement('span');
                sp.className = 'mysp';
                sp.innerHTML = item + '<br>';
                spans.push(sp);
                tit.appendChild(sp);
      });

      let mov = () => {
                if(last != null) spans.style.animation = '';
                spans.style.animation = 'move 2s';
                last = idx;
                idx += 1;
                if(idx >= spans.length) idx = 0;
                setTimeout(mov,2000);
      };

      mov();
})();
</script>

红影 发表于 2023-2-17 21:14

@马黑黑怎样让三个圆绕着同一个圆心转？本来是裁成了3个不同半径的圆环，发现仿照晕不晕那个帖子根本做不出来，才发现那里的三个图片本来就是同样大的透明图。
要怎样修改代码才能让三个圆环围着圆心转呢，我最后没办法把圆环做在同样大的透明背景上了{:4_173:}

绿叶清舟 发表于 2023-2-17 21:18

做得漂亮啊，转得晕晕的了{:4_189:}

马黑黑 发表于 2023-2-17 21:27

红影 发表于 2023-2-17 21:14
@马黑黑怎样让三个圆绕着同一个圆心转？本来是裁成了3个不同半径的圆环，发现仿照晕不晕那个帖子根本做不 ...

三个图片，可用三个img标签，也可用三个div（background设为图片背景）。都不用伪元素。

小辣椒 发表于 2023-2-17 21:27

亲爱的制作非常漂亮{:4_178:}

小辣椒 发表于 2023-2-17 21:27

各种元素配合的恰到好处

醉美水芙蓉 发表于 2023-2-17 21:32

红影 发表于 2023-2-17 21:59

绿叶清舟 发表于 2023-2-17 21:18
做得漂亮啊，转得晕晕的了

特地找的让人容易变晕的图图来试的{:4_189:}

红影 发表于 2023-2-17 22:00

马黑黑 发表于 2023-2-17 21:27
三个图片，可用三个img标签，也可用三个div（background设为图片背景）。都不用伪元素。

哦，这就可以同心了啊。谢谢黑黑，空了我试试{:4_187:}

红影 发表于 2023-2-17 22:02

小辣椒 发表于 2023-2-17 21:27
亲爱的制作非常漂亮

看到黑黑那个三张图图的，当时就像试一下，一直没时间{:4_173:}

红影 发表于 2023-2-17 22:03

小辣椒 发表于 2023-2-17 21:27
各种元素配合的恰到好处

谢谢亲爱的，我只是试试转动图图和移动字放一起，只图好玩的{:4_173:}

红影 发表于 2023-2-17 22:04

醉美水芙蓉 发表于 2023-2-17 21:32
好漂亮喔！

谢谢水芙蓉美女鼓励，套用代码试着玩玩的{:4_173:}

马黑黑 发表于 2023-2-17 22:36

红影 发表于 2023-2-17 22:00
哦，这就可以同心了啊。谢谢黑黑，空了我试试

好的

雨中悄然 发表于 2023-2-17 22:51

漂亮啊，这效果太好了，少见你出贴，每次都极其惊艳{:4_187:}膜拜影宝{:4_199:}

庶民 发表于 2023-2-18 05:50

精心的制作，用了好多技巧。

梦油 发表于 2023-2-18 09:19

哈哈哈！图中的圆把我看晕了。{:4_206:}
女孩那黑发飘拂的头发做得很好。

海笑 发表于 2023-2-18 10:01

欣赏老师佳作！

红影 发表于 2023-2-18 10:57

马黑黑 发表于 2023-2-17 22:36
好的

谢谢黑黑指点{:4_187:}

红影 发表于 2023-2-18 11:00

雨中悄然 发表于 2023-2-17 22:51
漂亮啊，这效果太好了，少见你出贴，每次都极其惊艳膜拜影宝

还是黑黑的代码啊，前面他用的3个图片，后面换成小点点了，我这个里面只是把图片那个用上去了。还没用对，用伪元素怎么也弄不出来让3个不同半径的圆同心，现在知道了，等下次再做就去试试{:4_173:}

红影 发表于 2023-2-18 11:03

庶民 发表于 2023-2-18 05:50
精心的制作，用了好多技巧。

多谢庶民鼓励，在单位里就开始弄了，折腾好半天，我不熟练，做帖子特别慢{:4_173:}

查看完整版本: 离别的车站（学习黑黑同心圆播放器）