加林森 发表于 2022-4-28 17:53

《Serenade(小夜曲)》（小号魂-纯音乐）

本帖最后由 加林森 于 2022-4-28 18:20 编辑 <br /><br /><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/626a5fb4239250f7c5558a9b.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; ">Serenade(小夜曲)</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= "https://www.joy127.com/url/90089.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-28 17:54

@马黑黑

马黑黑 发表于 2022-4-28 18:14

漂酿

加林森 发表于 2022-4-28 18:15

马黑黑 发表于 2022-4-28 18:14
漂酿

谢谢老黑支持。{:4_191:}

红影 发表于 2022-4-28 20:21

队长也做成了，真漂亮{:4_187:}

樵歌 发表于 2022-4-28 20:27

马术大展示，越用越顺溜。{:4_199:}

加林森 发表于 2022-4-28 21:01

红影 发表于 2022-4-28 20:21
队长也做成了，真漂亮

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

加林森 发表于 2022-4-28 21:01

樵歌 发表于 2022-4-28 20:27
马术大展示，越用越顺溜。

大大的有。。。。{:4_189:}

绿叶清舟 发表于 2022-4-28 21:21

队长这个制作太漂亮了

加林森 发表于 2022-4-28 21:25

绿叶清舟 发表于 2022-4-28 21:21
队长这个制作太漂亮了

谢谢清舟支持！{:4_204:}{:4_190:}

绿叶清舟 发表于 2022-4-28 21:30

加林森 发表于 2022-4-28 21:25
谢谢清舟支持！

队长太客气了

加林森 发表于 2022-4-28 21:54

绿叶清舟 发表于 2022-4-28 21:30
队长太客气了

好的好的。
页: [1]
查看完整版本: 《Serenade(小夜曲)》（小号魂-纯音乐）