鸳鸯舞

马黑黑

马黑黑

再远基础上略作改动，其实可以改的地方还很多：

1. <style>
   
2. body { perspective: 3000px; }
   
3. .mBox {
   
4.         --w: 100px;
   
5.         margin: auto;
   
6.         margin-top: 100px;
   
7.         display: flex;
   
8.         justify-content: center;
   
9.         align-items: center;
   
10.         width: var(--w);
    
11.         height: var(--w);
    
12.         cursor: pointer;
    
13.         position: relative;
    
14.         animation: rot 2s linear infinite;
    
15. }
    
16. .zBox {
    
17.         position: absolute;
    
18.         display: block;
    
19.         border-style: dotted;
    
20.         border-width: 1px;
    
21.         border-color: transparent red transparent magenta;
    
22.         border-radius: 50%;
    
23. }
    
24. @keyframes rot { to { transform: rotate(1turn); } }
    
25. </style>
    
26. 
    
27. <div class="mBox"></div>
    
28. 
    
29. <script>
    
30. let flag = true;
    
31. let ele = document.querySelector(".mBox");
    
32. let len= ele.clientWidth;
    
33. let zStr = "";
    
34. let all = 100;
    
35. let angle = Math.floor(360 / all);
    
36. 
    
37. for(j=0; j< all; j++){
    
38.         let wh =Math.floor(len- j * (len / all));
    
39.         zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
    
40. }
    
41. ele.innerHTML += zStr;
    
42. 
    
43. let au = document.createElement("audio");
    
44. au.src= "http://www.kumeiwp.com/sub/filestores/2022/04/26/884887672b95a12a17efbf911f4765f4.mp3";
    
45. au.loop = true;
    
46. au.autoplay = flag;
    
47. au.style.display = "none";
    
48. ele.appendChild(au);
    
49. 
    
50. if(!flag) ele.style.animationPlayState = "paused";
    
51. 
    
52. ele.onclick = function(){
    
53.         flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
    
54. }
    
55. </script>

复制代码

红影

这是两个孔雀尾衔接在一起了，真漂亮

红影

这个感觉像不断发散的感觉似的。看到这个不禁想到太极的两条鱼，还真有点太极图的感觉呢

马黑黑

红影 发表于 2022-4-26 23:43
这是两个孔雀尾衔接在一起了，真漂亮

这回还真有点像孔雀了。border-radius: 50%就可以吧展开的尾翼弄掉，变成尖尾

马黑黑

红影 发表于 2022-4-26 23:45
这个感觉像不断发散的感觉似的。看到这个不禁想到太极的两条鱼，还真有点太极图的感觉呢

这个感觉比较符合现实的样子

岩新新

欣赏学习！

加林森

好玩好玩。

梦油

黑黑朋友早晨好！
内行看门道，外行看热闹。我这个外行说不到点子上，但我觉得这个标题起到了画龙点睛的作用，两个色条上下飞舞、左右相望，真像是一对不离不弃、如胶似漆的鸳鸯，给人一种美的感受

红芍药

黑黑老师好手艺，可惜我没时间学。。

红影

马黑黑 发表于 2022-4-26 23:46
这回还真有点像孔雀了。border-radius: 50%就可以吧展开的尾翼弄掉，变成尖尾

我把4跳变都弄上颜色，就变成圆了呢。

红影

马黑黑 发表于 2022-4-26 23:46
这个感觉比较符合现实的样子

这个很漂亮的

马黑黑

红影 发表于 2022-4-27 12:33
这个很漂亮的

还行吧

马黑黑

红影 发表于 2022-4-27 12:33
我把4跳变都弄上颜色，就变成圆了呢。

对，一个缠绕着的圆

马黑黑

红芍药 发表于 2022-4-27 10:33
黑黑老师好手艺，可惜我没时间学。。

看看就好

红影

马黑黑 发表于 2022-4-27 12:48
还行吧

我把它做到星空图里去了，想起看过星云的盘旋。选的图图不挑好，让效果看不太出来了

红影

马黑黑 发表于 2022-4-27 12:48
对，一个缠绕着的圆

好神奇的呢，好玩

马黑黑

红影 发表于 2022-4-27 20:52
好神奇的呢，好玩

开心就好

马黑黑

红影 发表于 2022-4-27 20:51
我把它做到星空图里去了，想起看过星云的盘旋。选的图图不挑好，让效果看不太出来了

额

红影

马黑黑 发表于 2022-4-27 22:27
开心就好

嗯嗯，非常有趣。