醉美水芙蓉 发表于 2022-5-28 12:29

学习双圆环旋转

本帖最后由 醉美水芙蓉 于 2022-5-28 16:16 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1542249">
<style>
.hy { width: 1200px; height: 675px; position: relative;left:-302px; top: 120px;box-shadow:4px 4px 5px #333;

padding:2px;border-radius:8px;background:#666 url('http://pan.yinhuabbs.cn/view.php/f8757930d7f7f0b940af781ae78bd93a.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;
}
body { perspective: 3000px; }
.mBox {
      --w: 320px;
      left:446px; top: 170px;

      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--w);
      height: var(--w);
      cursor: pointer;
      position: absolute;
      animation: rot 7s linear infinite;
}
.zBox {
      position: absolute;
      display: block;
      border-style: dotted;
      border-width: 2px;
      border-color: transparent #cc3333 transparent #5B7AFA;
      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: #cc0033;
      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= "https://www.qqmc.com/up/kwlink.php?id=220478443&.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></td></tr></table>

马黑黑 发表于 2022-5-28 12:48

还没拉就黑了{:4_170:}

加林森 发表于 2022-5-28 12:48

水芙蓉这个很漂亮的，赞！{:4_204:}

醉美水芙蓉 发表于 2022-5-28 13:01

马黑黑 发表于 2022-5-28 12:48
还没拉就黑了

黑黑老师标题如何变颜色？

醉美水芙蓉 发表于 2022-5-28 13:01

加林森 发表于 2022-5-28 12:48
水芙蓉这个很漂亮的，赞！

谢谢队长支持！

马黑黑 发表于 2022-5-28 13:07

醉美水芙蓉 发表于 2022-5-28 13:01
黑黑老师标题如何变颜色？

标题变色不是一个小工程，可以考虑：

JS生成随机颜色，然后通过监听音频进度来驱动文本的 color 属性，这样只要音乐播放，标题就能不停地变颜色

加林森 发表于 2022-5-28 13:27

醉美水芙蓉 发表于 2022-5-28 13:01
谢谢队长支持！

不客气的。

红影 发表于 2022-5-28 15:39

很漂亮的制作，欣赏水芙蓉好帖。{:4_204:}

红影 发表于 2022-5-28 15:41

醉美水芙蓉 发表于 2022-5-28 13:01
黑黑老师标题如何变颜色？

如果只是想改变标题颜色，在#baiBox里修改color: #DFE5FD;即可。

马黑黑 发表于 2022-5-28 16:06

红影 发表于 2022-5-28 15:41
如果只是想改变标题颜色，在#baiBox里修改color: #DFE5FD;即可。

原来说的只是改变标题颜色呀

醉美水芙蓉 发表于 2022-5-28 16:08

马黑黑 发表于 2022-5-28 13:07
标题变色不是一个小工程，可以考虑：

JS生成随机颜色，然后通过监听音频进度来驱动文本的 color 属性 ...

谢谢黑黑老师！

马黑黑 发表于 2022-5-28 16:13

醉美水芙蓉 发表于 2022-5-28 16:08
谢谢黑黑老师！

如果只是修改标题的颜色，按红影说的做就成了

醉美水芙蓉 发表于 2022-5-28 16:19

红影 发表于 2022-5-28 15:41
如果只是想改变标题颜色，在#baiBox里修改color: #DFE5FD;即可。

谢谢红影美女已改颜色了！

醉美水芙蓉 发表于 2022-5-28 16:26

马黑黑 发表于 2022-5-28 16:06
原来说的只是改变标题颜色呀

谢谢黑黑老师我已改颜色了！

马黑黑 发表于 2022-5-28 17:27

醉美水芙蓉 发表于 2022-5-28 16:26
谢谢黑黑老师我已改颜色了！

看到了
页: [1]
查看完整版本: 学习双圆环旋转