优雅舞蹈

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

您需要登录才可以下载或查看，没有账号？立即注册

x

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

马黑黑 · 发表于 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>