<style>
.mBox {
    --w: 50px; /* 尺寸 */
    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;
}
.mBox span {
    position: absolute;
    width: inherit;
    height: inherit;
    display: block;
    border: 1px solid deeppink;
}
.mBox span:nth-child(1) { transform: rotate(0deg); }
.mBox span:nth-child(2) { transform: rotate(120deg); }
.mBox span:nth-child(3) { transform: rotate(240deg); }
.mBox span:nth-child(4) { width: 8px; height: 8px; border-radius: 50%; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div class="mBox"></div>
<script>
let mBox = document.querySelector(".mBox");
let au = document.createElement("audio");
let flag = true;
au.src = "https://3a.ttt.dj/d/189Cloud/music/Vitas%20-%20%E6%98%9F%E6%98%9F.mp3";
au.autoplay = flag;
au.loop = true;
au.style.display = "none";
mBox.appendChild(au);
if(!flag) mBox.style.animationPlayState = "paused";
mBox.onclick = function(){
    flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
}
</script>



-----------------------------------------------------------------------------------------

尺寸修改这句： --w: 50px; / 尺寸 /

定位把如下两句删掉并增加 left与 top：

margin: auto;

margin-top: 100px;

例如： 

left: 100px;

top: 100px;




来源 花潮论坛

标签: none

添加新评论