马黑黑 发表于 2022-4-26 13:06

优雅舞蹈

本帖最后由 马黑黑 于 2022-4-26 13:11 编辑 <br /><br /><style>
.mBox {
        --w: 120px;
        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: solid;
        border-width: 1px;
        border-color: transparent darkgreen transparent transparent;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

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

<script>
let flag = true;
let ele = document.querySelector(".mBox");
let len= ele.clientWidth;
let zStr = "";
let all = 100;
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/2022/04/26/b8815267635677e18b0a8e66f04b0d56.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-26 13:06

本帖最后由 马黑黑 于 2022-4-26 13:12 编辑

代码：
<style>
.mBox {
      --w: 120px;
      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: solid;
      border-width: 1px;
      border-color: transparent darkgreen transparent transparent;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

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

<script>
let flag = true;
let ele = document.querySelector(".mBox");
let len = ele.clientWidth;
let zStr = "";
let all = 100;
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/2022/04/26/b8815267635677e18b0a8e66f04b0d56.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-26 13:43

美妙的制作，欣赏{:4_190:}

加林森 发表于 2022-4-26 17:36

精美的制作，果然动起来了。{:4_199:}

马黑黑 发表于 2022-4-26 18:42

朵拉 发表于 2022-4-26 13:43
美妙的制作，欣赏

朵拉晚上好。好久不见，甚是想念{:5_117:}

马黑黑 发表于 2022-4-26 18:42

加林森 发表于 2022-4-26 17:36
精美的制作，果然动起来了。

这个本来是容易的

加林森 发表于 2022-4-26 19:12

马黑黑 发表于 2022-4-26 18:42
这个本来是容易的

嗯嗯，真漂亮。

马黑黑 发表于 2022-4-26 19:17

加林森 发表于 2022-4-26 19:12
嗯嗯，真漂亮。

本来就不丑{:5_106:}

红影 发表于 2022-4-26 20:01

黑黑让这100个盒子边转起来了。这个造型转动起来还真美啊{:4_187:}

加林森 发表于 2022-4-26 20:01

马黑黑 发表于 2022-4-26 19:17
本来就不丑

就是，我一看见就有感觉的。

红影 发表于 2022-4-26 20:02

这个像发散的螺旋线，看着很玄妙的{:4_199:}

绿叶清舟 发表于 2022-4-26 20:13

这个转起来更漂亮了

马黑黑 发表于 2022-4-26 21:13

绿叶清舟 发表于 2022-4-26 20:13
这个转起来更漂亮了

动起来似乎更有灵气

马黑黑 发表于 2022-4-26 21:17

加林森 发表于 2022-4-26 20:01
就是，我一看见就有感觉的。

挺灵的

马黑黑 发表于 2022-4-26 21:18

红影 发表于 2022-4-26 20:01
黑黑让这100个盒子边转起来了。这个造型转动起来还真美啊

还行吧，可以人家可不是盒子，也不是让100个转动，而是一个

加林森 发表于 2022-4-26 21:19

马黑黑 发表于 2022-4-26 21:17
挺灵的

嗯嗯。

马黑黑 发表于 2022-4-26 21:20

加林森 发表于 2022-4-26 21:19
嗯嗯。

队长腻害

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

马黑黑 发表于 2022-4-26 21:13
动起来似乎更有灵气

是啊，想想来搞个啥

加林森 发表于 2022-4-26 21:24

马黑黑 发表于 2022-4-26 21:20
队长腻害

不是厉害哦，就是感觉特别好的。

马黑黑 发表于 2022-4-26 21:24

加林森 发表于 2022-4-26 21:24
不是厉害哦，就是感觉特别好的。

这就很厉害了
页: [1] 2
查看完整版本: 优雅舞蹈