论坛 › 欢乐水吧 › 《少年》-- 梦然

加林森 发表于 2022-4-30 21:31

《少年》-- 梦然

<style>
.hy { width: 800px; height: 1134px;position: relative;left:-20px; top: 120px;box-shadow:4px 4px 5px #333;

padding:2px;border-radius:8px;background:#666 url('https://pic.imgdb.cn/item/626d393d239250f7c5324d9a.jpg')no-repeat

center/cover;}
.hy::before {
      content: '';
      position: absolute;
      width: 80%;
      height: 80%;
      background: url('https://pic.imgdb.cn/item/6268f0a1239250f7c58a5669.gif') no-repeat center/cover;
      left:160px; top: 70px;
}
.mBox {
      --w: 100px;
      margin: auto;
      margin-top: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--w);
      height: var(--w);
      cursor: pointer;
      position: relative;
      animation: rot 2s linear infinite;
}
.zBox {
      position: absolute;
      display: block;
      border-style: dotted;
      border-width: 1px;
      border-color: transparent red transparent magenta;
      border-radius: 50%;
}

@keyframes rot { to { transform: rotate(-1turn); } }
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
      margin: auto;
      width: 360px;
      text-align: center;
      font-size: 2.2rem;
      font-weight: bold;
      color: #DFE5FD;
      transform-origin: top;
      animation: yao 1s linear infinite alternate;
}
@keyframes yao {
      from{transform: perspective(800px) rotatex(12deg); }
      to { transform: perspective(800px) rotatex(-12deg); }
}
</style>
<div class="hy">
<div id="baiBox" style="position: absolute; left:40px; top: 60px; ">梦然 - 少年</div>

<div class="mBox"></div></div><br><br><br><br><br><br><br><br><br><br>

<script>
let flag = true;
let ele = document.querySelector(".mBox");
let len= ele.clientWidth;
let zStr = "";
let all = 110;
let angle = Math.floor(360 / all);

for(j=0; j< all; j++){
      let wh =Math.floor(len- j * (len / all));
      zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
}
ele.innerHTML += zStr;

let au = document.createElement("audio");
au.src= "http://www.kumeiwp.com/sub/filestores/2021/02/10/ce8a64f9566f2602f6f5407af58cf712.mp3";
au.loop = true;
au.autoplay = flag;
au.style.display = "none";
ele.appendChild(au);

if(!flag) ele.style.animationPlayState = "paused";

ele.onclick = function(){
      flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play

(),this.style.animationPlayState = "running",flag = true);
}
</script>

来看你 发表于 2022-4-30 21:51

沙发听歌。。

红影 发表于 2022-4-30 22:56

好看，队长的帖子真棒{:4_187:}

加林森 发表于 2022-4-30 23:09

来看你 发表于 2022-4-30 21:51
沙发听歌。。

谢谢看看支持！{:4_204:}

加林森 发表于 2022-4-30 23:10

红影 发表于 2022-4-30 22:56
好看，队长的帖子真棒

谢谢红影支持！{:4_204:}

马黑黑 发表于 2022-5-1 07:40

作品精美至极，欣赏

加林森 发表于 2022-5-1 09:13

马黑黑 发表于 2022-5-1 07:40
作品精美至极，欣赏

谢谢老黑支持！{:4_190:}

马黑黑 发表于 2022-5-1 10:06

加林森 发表于 2022-5-1 09:13
谢谢老黑支持！

{:4_180:}

加林森 发表于 2022-5-1 10:07

马黑黑 发表于 2022-5-1 10:06


{:4_190:}

马黑黑 发表于 2022-5-1 10:07

加林森 发表于 2022-5-1 10:07


谢茶

加林森 发表于 2022-5-1 10:08

马黑黑 发表于 2022-5-1 10:07
谢茶

不客气的。

马黑黑 发表于 2022-5-1 10:08

加林森 发表于 2022-5-1 10:08
不客气的。

应该的应该的

加林森 发表于 2022-5-1 10:14

马黑黑 发表于 2022-5-1 10:08
应该的应该的

好的好的。

大猫咪 发表于 2022-5-1 10:24

一直喜欢的经典，队长制作真漂亮， 赞！！！

节日快乐！

{:4_204:}{:4_199:}

加林森 发表于 2022-5-1 10:42

大猫咪 发表于 2022-5-1 10:24
一直喜欢的经典，队长制作真漂亮， 赞！！！

节日快乐！

猫猫也喜欢，我感到真高兴。节日快乐！{:4_204:}

大猫咪 发表于 2022-5-1 10:44

加林森 发表于 2022-5-1 10:42
猫猫也喜欢，我感到真高兴。节日快乐！

老喜欢这歌了谢谢队长    节日快乐   {:4_204:}{:4_191:}{:4_179:}

马黑黑 发表于 2022-5-1 10:46

加林森 发表于 2022-5-1 10:14
好的好的。

蟹蟹

加林森 发表于 2022-5-1 11:20

大猫咪 发表于 2022-5-1 10:44
老喜欢这歌了谢谢队长    节日快乐

好的好的。{:4_204:}{:4_191:}{:4_179:}

加林森 发表于 2022-5-1 11:21

马黑黑 发表于 2022-5-1 10:46
蟹蟹

今天不抓了。{:4_189:}

马黑黑 发表于 2022-5-1 11:22

加林森 发表于 2022-5-1 11:21
今天不抓了。

放个假

查看完整版本: 《少年》-- 梦然