咋称呼

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         position: absolute;
   
4.         top: 60px;
   
5.         left: 60px;
   
6.         width: 160px;
   
7.         height: 80px;
   
8.         color: var(--border);
   
9.         text-shadow: 1px 1px 1px #000;
   
10.         background: none;
    
11.         border: 6px dotted var(--border);
    
12.         border-radius: 80px 80px 0 0;
    
13.         display: grid;
    
14.         place-items: end center;
    
15.         cursor: pointer;
    
16.         transform: perspective(2000px) rotateY(-33deg);
    
17.         --deg: 0;
    
18.         --border: hsla(120,80%,40%,.6);
    
19. }
    
20. #mydiv::before {
    
21.         position: absolute;
    
22.         content: '';
    
23.         width: 6px;
    
24.         height: 78px;
    
25.         background: var(--border);
    
26.         border-radius: 8px;
    
27.         transform-origin: center bottom;
    
28.         transform: rotate(var(--deg));
    
29. }
    
30. </style>
    
31. 
    
32. <div id="mydiv"></div>
    
33. 
    
34. <script>
    
35. let go = true, rq = null;
    
36. let swing = () => {
    
37.         let deg = 60 - Math.floor(Math.random()*120);
    
38.         mydiv.style.setProperty('--deg',deg + 'deg');
    
39.         if(go) rq = requestAnimationFrame(swing);
    
40. }
    
41. mydiv.addEventListener('click', () => {
    
42.         go = !go;
    
43.         if(!go) {
    
44.                 cancelAnimationFrame(rq);
    
45.                 return;
    
46.         }
    
47.         rq = requestAnimationFrame(swing);
    
48. });
    
49. swing();
    
50. </script>
    

复制代码

马黑黑

这里面涉及到：

一、CSS画半圆的方法

首先，元素的宽高尺寸，一个为另一个的一半，比如，宽为160，则高为80；其次，设置好 border-radius 值，请参考第 12 行代码；最后，根据需要设计背景色和（或）边框。

二、用元素的一个为伪元素是做指针（20-29行）

三、使用 JS 驱动指针在一定角度之间来回转动（本例是在 -60  ~ 60deg 之间），JS调用的是请求关键帧动画方法，速度很快，晃眼看上去好像有三四根指针在晃动。

庶民

这个跟制作时钟的方式差不多。

马黑黑

庶民 发表于 2023-3-12 18:14
这个跟制作时钟的方式差不多。

比时钟简单多了

红影

好玩，我来给个名称：指针疯了

马黑黑

红影 发表于 2023-3-12 18:55
好玩，我来给个名称：指针疯了

马黑黑

醉美水芙蓉 发表于 2023-3-12 19:50
转速比秒表还快！

可以控制