绿叶清舟 发表于 2022-4-26 22:41

钢铁工人志如钢-预祝五一


<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 #fff729 transparent transparent;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>


<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -80px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=659 background=https://pic.imgdb.cn/item/626802da239250f7c5d13b8a.jpg>
               <div style="position:absolute; LEFT: 600px; TOP: 250px;">
                <div class="mBox"></div>
      </div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><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 = 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://music.163.com/song/media/outer/url?id=1894133917.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 23:53

清舟这么快就把这个效果用在帖子里了，真棒{:4_187:}

红影 发表于 2022-4-26 23:53

借庆祝好帖同祝大家五一节快乐{:4_187:}

加林森 发表于 2022-4-27 09:07

清舟辛苦啦，这么快就把老黑的教程用上了啊，真漂亮！{:4_204:}{:4_199:}

梦油 发表于 2022-4-27 09:37

清舟朋友新闻意识很强。借清舟朋友美帖，祝朋友们节日快乐！

绿叶清舟 发表于 2022-4-27 15:13

梦油 发表于 2022-4-27 09:37
清舟朋友新闻意识很强。借清舟朋友美帖，祝朋友们节日快乐！

谢谢梦油，也预祝节日快乐

绿叶清舟 发表于 2022-4-27 15:14

加林森 发表于 2022-4-27 09:07
清舟辛苦啦，这么快就把老黑的教程用上了啊，真漂亮！

谢谢队长，一时还想不到怎么用的，先这样放上了

绿叶清舟 发表于 2022-4-27 15:15

红影 发表于 2022-4-26 23:53
清舟这么快就把这个效果用在帖子里了，真棒

正好快五一了想到钢花的，好象还能再放大一点

梦油 发表于 2022-4-27 15:16

绿叶清舟 发表于 2022-4-27 15:13
谢谢梦油，也预祝节日快乐

谢谢清舟朋友。这个“五·一”你也出不了门吧？我们这里提倡无必要不出京，尽量在家里过节，不要聚餐。

加林森 发表于 2022-4-27 16:16

绿叶清舟 发表于 2022-4-27 15:14
谢谢队长，一时还想不到怎么用的，先这样放上了

挺好看的。{:4_204:}

红影 发表于 2022-4-27 21:53

绿叶清舟 发表于 2022-4-27 15:15
正好快五一了想到钢花的，好象还能再放大一点

挺漂亮的，和背景十分相称呢{:4_187:}

绿叶清舟 发表于 2022-4-27 22:01

梦油 发表于 2022-4-27 15:16
谢谢清舟朋友。这个“五·一”你也出不了门吧？我们这里提倡无必要不出京，尽量在家里过节，不要聚餐。

客气了啊，我们五一应该出不了门了吧，你那也要小心了，昨天还二十多的，今天有四十几了翻了个倍的

绿叶清舟 发表于 2022-4-27 22:01

红影 发表于 2022-4-27 21:53
挺漂亮的，和背景十分相称呢

本来先想到的抛烟火的，可找不到主题了

红影 发表于 2022-4-28 07:46

绿叶清舟 发表于 2022-4-27 22:01
本来先想到的抛烟火的，可找不到主题了

还是这个主题应景，而且画面也大气，真不错呢{:4_187:}

梦油 发表于 2022-4-28 10:25

绿叶清舟 发表于 2022-4-27 22:01
客气了啊，我们五一应该出不了门了吧，你那也要小心了，昨天还二十多的，今天有四十几了翻了个倍的

谢谢清舟关心。祝愿我们安全无恙。

小九 发表于 2022-4-28 17:17

好有气势的感觉{:4_199:}

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

红影 发表于 2022-4-28 07:46
还是这个主题应景，而且画面也大气，真不错呢

是啊，想到快五一了就去找了钢花的素材了

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

小九 发表于 2022-4-28 17:17
好有气势的感觉

现在需要来点解气的了{:4_189:}

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

梦油 发表于 2022-4-28 10:25
谢谢清舟关心。祝愿我们安全无恙。

不客气了，但愿这次大家都能平安度过

梦油 发表于 2022-4-28 20:16

绿叶清舟 发表于 2022-4-28 20:13
不客气了，但愿这次大家都能平安度过

清舟朋友晚上好！咱们都加强自我防护吧。
页: [1] 2
查看完整版本: 钢铁工人志如钢-预祝五一