风火轮？

马黑黑

马黑黑

代码：

1. <style>
   
2. .mBox {
   
3.         --w: 50px; /* 尺寸 */
   
4.         margin: auto;
   
5.         margin-top: 100px;
   
6.         display: flex;
   
7.         justify-content: center;
   
8.         align-items: center;
   
9.         width: var(--w);
   
10.         height: var(--w);
    
11.         cursor: pointer;
    
12.         position: relative;
    
13.         animation: rot 2s linear infinite;
    
14. }
    
15. .mBox span {
    
16.         position: absolute;
    
17.         width: inherit;
    
18.         height: inherit;
    
19.         display: block;
    
20.         border: 1px solid deeppink;
    
21. }
    
22. .mBox span:nth-child(1) { transform: rotate(0deg); }
    
23. .mBox span:nth-child(2) { transform: rotate(120deg); }
    
24. .mBox span:nth-child(3) { transform: rotate(240deg); }
    
25. .mBox span:nth-child(4) { width: 8px; height: 8px; border-radius: 50%; }
    
26. 
    
27. @keyframes rot { to { transform: rotate(1turn); } }
    
28. </style>
    
29. 
    
30. <div class="mBox"><span></span><span></span><span></span><span></span></div>
    
31. 
    
32. <script>
    
33. let mBox = document.querySelector(".mBox");
    
34. let au = document.createElement("audio");
    
35. let flag = true;
    
36. au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/23/86e2083757b6e60a6f16f84f9e897f6c.mp3";
    
37. au.autoplay = flag;
    
38. au.loop = true;
    
39. au.style.display = "none";
    
40. mBox.appendChild(au);
    
41. if(!flag) mBox.style.animationPlayState = "paused";
    
42. mBox.onclick = function(){
    
43.         flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
    
44. }
    
45. </script>

复制代码

马黑黑

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

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

margin: auto;
margin-top: 100px;

例如：

left: 100px;
top: 100px;

加林森

来学习

红影

漂亮，又可以做新的按钮了

马黑黑

红影 发表于 2022-4-24 23:07
漂亮，又可以做新的按钮了

按钮也来越多了

红影

还可以把上次的径向渐变加进来，更像风火轮了

马黑黑

红影 发表于 2022-4-24 23:11
还可以把上次的径向渐变加进来，更像风火轮了

这个你试试

红影

马黑黑 发表于 2022-4-24 23:09
按钮也来越多了

万物皆可按钮

红影

马黑黑 发表于 2022-4-24 23:14 这个你试试

我配色配不好，试一下：

红影

马黑黑 发表于 2022-4-24 23:14
这个你试试

哈哈，试完发现不像风火轮，更像齿轮了

马黑黑

红影 发表于 2022-4-25 22:50
哈哈，试完发现不像风火轮，更像齿轮了

我估计也是

马黑黑

红影 发表于 2022-4-25 22:48
我配色配不好，试一下：

也还看得过去

马黑黑

红影 发表于 2022-4-25 22:47
万物皆可按钮

差不多是酱紫

红影

马黑黑 发表于 2022-4-25 23:14
我估计也是

反正不管是什么，只是看看有颜色的效果如何

红影

马黑黑 发表于 2022-4-25 23:15
差不多是酱紫

饿呢，现在发现音乐跟什么都可以关联的，只要语句里设置了。

马黑黑

红影 发表于 2022-4-26 21:15
反正不管是什么，只是看看有颜色的效果如何

挺好挺好

马黑黑

红影 发表于 2022-4-26 21:16
饿呢，现在发现音乐跟什么都可以关联的，只要语句里设置了。

当然。物联网，怎么能忽略了音乐

红影

马黑黑 发表于 2022-4-26 21:16
挺好挺好

感觉这个也可以当风车

红影

马黑黑 发表于 2022-4-26 21:17
当然。物联网，怎么能忽略了音乐

就是，没有黑黑关联不了的东东