CSS+JS小玩意：有去有回

马黑黑

马黑黑

原创代码分享：

1. <style>
   
2. .outbox {
   
3.         display: flex;
   
4.         justify-content: center;
   
5.         align-items: center;
   
6.         margin: auto;
   
7.         margin-top: 100px;
   
8.         width: 500px;
   
9.         height: 500px;
   
10.         position: relative;
    
11. }
    
12. 
    
13. .outbox div {
    
14.         position: absolute;
    
15.         --len: 40px;
    
16.         width: var(--len);
    
17.         height: var(--len);
    
18.         font: 14px / var(--len) Sans-serif;
    
19.         background: #666 linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    
20.         text-align: center;
    
21.         border-radius: 50%;
    
22. }
    
23. 
    
24. </style>
    
25. 
    
26. <div class="outbox"></div>
    
27. 
    
28. <script>
    
29. let box = document.querySelector('.outbox');
    
30. let total = 40;
    
31. let angle = 360 / total;
    
32. let len = box.clientWidth / 2;
    
33. let str = '';
    
34. let step = total;
    
35. let go = true;
    
36. for(j=0; j<total; j++) {
    
37.         str += `<div>${j+1}</div>`;
    
38. }
    
39. box.innerHTML = str;
    
40. 
    
41. function forward(ele,ang) {
    
42.         ele.style.transform = `rotate(${ang}deg) translate(${len}px) rotate(${360-ang}deg)`;
    
43. }
    
44. function back(ele,ang) {
    
45.         ele.style.transform = `rotate(0deg) translate(0px) rotate(0deg)`;
    
46. }
    
47. 
    
48. setInterval(function() {
    
49.         if(go) {
    
50.                 step = step - 1;
    
51.                 if(step <= 0) go = false;
    
52.                 forward(box.children[step],step*angle);
    
53.         } else {
    
54.                 back(box.children[step],0);
    
55.                 step = step + 1;
    
56.                 if(step >= total) go = true;
    
57.         }
    
58. },100);
    
59. </script>

复制代码

马黑黑

第26行是HTML代码，其上为CSS，其下是JS

马黑黑

第26行是HTML代码，其上为CSS，其下是JS

梦油

有趣，有趣，而且很实用

红影

逐个添加，逐个收起。有趣。中间的还能计数。强大的JS

马黑黑

红影 发表于 2022-4-13 17:58
逐个添加，逐个收起。有趣。中间的还能计数。强大的JS

中间是各个“围棋子”，它们离开原地，又依次回到原地

红影

马黑黑 发表于 2022-4-13 18:05
中间是各个“围棋子”，它们离开原地，又依次回到原地

这个JS看着很简洁，但很难理解。

马黑黑

红影 发表于 2022-4-13 21:38
这个JS看着很简洁，但很难理解。

道理上是简单的。两个函数，一个是个子元素从圆心到边缘的CSS路线设定，一个是回去的。然后是定时器判断是去还是回，每隔一定的时间驱动一次。

红影

马黑黑 发表于 2022-4-13 22:03
道理上是简单的。两个函数，一个是个子元素从圆心到边缘的CSS路线设定，一个是回去的。然后是定时器判断 ...

js太能耐了，简洁的语句却是能营造出绚丽的效果。

马黑黑

红影 发表于 2022-4-15 09:32
js太能耐了，简洁的语句却是能营造出绚丽的效果。

编程语言是高效的

红影

马黑黑 发表于 2022-4-15 12:44
编程语言是高效的

是的，感受到了。

马黑黑

红影 发表于 2022-4-15 13:36
是的，感受到了。

挺好的

加林森

好强大的js，太厉害了。

红影

马黑黑 发表于 2022-4-15 17:56
挺好的

是非常的好呢

马黑黑

红影 发表于 2022-4-15 20:08
是非常的好呢

还行吧

马黑黑

加林森 发表于 2022-4-15 19:38
好强大的js，太厉害了。

一般一般

加林森

马黑黑 发表于 2022-4-15 20:46
一般一般

还一般？我看得头差点两个大了。

马黑黑

加林森 发表于 2022-4-15 20:48
还一般？我看得头差点两个大了。

那是因为你不一般

加林森

马黑黑 发表于 2022-4-15 20:51
那是因为你不一般

你世界第三，我是倒数第三才对。