|
|

楼主 |
发表于 2022-4-24 22:31
|
显示全部楼层
本帖最后由 马黑黑 于 2022-4-24 22:37 编辑
代码:
- <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"><span></span><span></span><span></span><span></span></div>
- <script>
- let mBox = document.querySelector(".mBox");
- let au = document.createElement("audio");
- let flag = true;
- au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/23/86e2083757b6e60a6f16f84f9e897f6c.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>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|