看看晕不晕

马黑黑

马黑黑

代码：

1. <style>
   
2. #mydiv {
   
3.         --angle1: 0;
   
4.         --angle2: 360deg;
   
5.         --state: paused;
   
6.         margin: 50px auto;
   
7.         position: relative;
   
8.         width: 200px;
   
9.         height: 200px;
   
10.         background: url('/forum.php?mod=attachment&aid=NDQwMzZ8MjFmNWY2YTJ8MTY3NTg1MDQwNHw3MTMwfDU2MzQ3&noupdate=yes') no-repeat center/cover;
    
11.         cursor: pointer;
    
12.         animation: rot 10s linear infinite;
    
13.         animation-play-state: var(--state);
    
14. }
    
15. #mydiv::before, #mydiv::after {
    
16.         --angle1: 360deg;
    
17.         --angle2: 0;
    
18.         position: absolute;
    
19.         content: '';
    
20.         width: 100%;
    
21.         height: 100%;
    
22.         background: url('/forum.php?mod=attachment&aid=NDQwMzd8NjY3YzBlNTF8MTY3NTg1MDQwNHw3MTMwfDU2MzQ3&noupdate=yes') no-repeat center/cover;
    
23.         animation: rot 6s linear infinite;
    
24.         animation-play-state: var(--state);
    
25. }
    
26. #mydiv::after {
    
27.         --angle1: 0;
    
28.         --angle2: 360deg;
    
29.         background: url('/forum.php?mod=attachment&aid=NDQwMzh8ZDJhNGNkY2J8MTY3NTg1MDQwNHw3MTMwfDU2MzQ3&noupdate=yes') no-repeat center/cover;
    
30.         animation-duration: 16s;
    
31. }
    
32. @keyframes rot {
    
33.         0% { transform: rotate(var(--angle1)); }
    
34.         100% { transform: rotate(var(--angle2)); }
    
35. }
    
36. </style>
    
37. 
    
38. <div id="mydiv"></div>
    
39. 
    
40. <script>
    
41. let flag = true;
    
42. mydiv.addEventListener('click', () => {
    
43.         mydiv.style.setProperty('--state', flag ? 'running' : 'paused');
    
44.         flag = !flag;
    
45. });
    
46. </script>

复制代码

庶民

好像电脑里的风扇。

梦油

逆向旋转——晕了。

马黑黑

梦油 发表于 2023-2-8 18:16
逆向旋转——晕了。

正常，不晕飞机就好

马黑黑

庶民 发表于 2023-2-8 18:16
好像电脑里的风扇。

确实很像

樵歌

俺盯着好一阵竟然没晕

马黑黑

樵歌 发表于 2023-2-8 19:16
俺盯着好一阵竟然没晕

你要让它转动起来

红影

有逆时针转的，有顺时针转的，真漂亮

梦油

马黑黑 发表于 2023-2-8 18:55
正常，不晕飞机就好

我第一次坐飞机是二十多岁，飞机起飞时还真有点晕，后来随着乘机越来越多，这种晕机情况也就消失了。

马黑黑

梦油 发表于 2023-2-8 20:37
我第一次坐飞机是二十多岁，飞机起飞时还真有点晕，后来随着乘机越来越多，这种晕机情况也就消失了。

对，会慢慢适应

马黑黑

醉美水芙蓉 发表于 2023-2-8 19:39
转动速度慢点不会晕！

你坚强

马黑黑

红影 发表于 2023-2-8 19:36
有逆时针转的，有顺时针转的，真漂亮

这个创意还是可以的

梦油

马黑黑 发表于 2023-2-8 20:40
对，会慢慢适应

是的，慢慢适应了，当然也就习惯啦。

樵歌

马黑黑 发表于 2023-2-8 19:26
你要让它转动起来

点动了呵。俺当过海军，练过

马黑黑

樵歌 发表于 2023-2-8 20:54
点动了呵。俺当过海军，练过

酱紫

马黑黑

梦油 发表于 2023-2-8 20:54
是的，慢慢适应了，当然也就习惯啦。

习惯成自然

梦油

马黑黑 发表于 2023-2-8 20:59
习惯成自然

是的，好多事已成了习惯，就不好改了。

马黑黑

梦油 发表于 2023-2-8 21:12
是的，好多事已成了习惯，就不好改了。

也没必要改