本帖最后由 加林森 于 2022-5-16 14:54 编辑 <br /><br /><div class="quote"><blockquote><font size="2"><a href="forum.php?mod=redirect&goto=findpost&pid=1433498&ptid=56308" target="_blank"><font color="#999999">杨柳青 发表于 2022-1-28 23:01</font></a></font><br>黑马学生不少哦~~</blockquote></div><br>你不服？<div><br></div><div><div><style></div><div>.mBox {</div><div> --w: 120px;</div><div> margin: auto;</div><div> margin-top: 100px;</div><div> display: flex;</div><div> justify-content: center;</div><div> align-items: center;</div><div> width: var(--w);</div><div> height: var(--w);</div><div> cursor: pointer;</div><div> position: relative;</div><div> animation: rot 2s linear infinite;</div><div>}</div><div>.zBox {</div><div> position: absolute;</div><div> display: block;</div><div> border-style: solid;</div><div> border-width: 1px;</div><div> border-color: transparent #fff729 transparent transparent;</div><div>}</div><div>@keyframes rot { to { transform: rotate(1turn); } }</div><div></style></div><div><br></div><div><br></div><div><DIV align=center color=#ff0000 ></div><div><table style="position: relative; LEFT: -214px; width:1024px;TOP: 250px" border="0" cellspacing="0" cellpadding="0"></div><div><TBODY><TR><TD height=562 background=https://pic.imgdb.cn/item/6281f30c09475431295245cb.jpg></div><div> <div style="position:absolute; LEFT: 600px; TOP: 320px;"></div><div> <div class="mBox"></div></div><div> </div></div><div></TD></TR></div><div></table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></div><div><br></div><div><script></div><div>let flag = true;</div><div>let ele = document.querySelector(".mBox");</div><div>let len = ele.clientWidth;</div><div>let zStr = "";</div><div>let all = 100;</div><div>let angle = Math.floor(360 / all);</div><div><br></div><div>for(j=0; j< all; j++){</div><div> let wh = Math.floor(len- j * (len / all));</div><div> zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;</div><div>}</div><div>ele.innerHTML += zStr;</div><div><br></div><div>let au = document.createElement("audio");</div><div>au.src= "<span style="color: rgb(0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;">http://www.kumeiwp.com/sub/filestores/2022/03/07/f430f2d5d636b3cdf5529cd5076f731e.mp3</span>";</div><div>au.loop = true;</div><div>au.autoplay = flag;</div><div>au.style.display = "none";</div><div>ele.appendChild(au);</div><div><br></div><div>if(!flag) ele.style.animationPlayState = "paused";</div><div><br></div><div>ele.onclick = function(){</div><div> flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);</div><div>}</div><div></script></div></div>
本帖最后由 加林森 于 2022-5-16 17:24 编辑 <br /><br />杨柳青 发表于 2022-1-28 22:57
手机上听不清楚~~
破手机{:5_117:}
<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: -214px; width:1024px;TOP: 250px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=562 background=https://pic.imgdb.cn/item/6281f30c09475431295245cb.jpg>
<div style="position:absolute; LEFT: 600px; TOP: 320px;">
<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://www.kumeiwp.com/sub/filestores/2022/03/07/f430f2d5d636b3cdf5529cd5076f731e.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>