水吧飞行器起飞

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         --state: running;
   
4.         position: relative;
   
5.         top: 200px;
   
6.         width: 100px;
   
7.         height: 120px;
   
8.         border-style: solid;
   
9.         border-color: transparent transparent hsla(120, 70%,50%, .25) transparent;
   
10.         border-width: 20px 120px 120px 120px;
    
11.         border-radius: 50%;
    
12.         box-shadow: 20px 20px 30px green inset, -20px -20px 30px green inset;
    
13.         cursor: pointer;
    
14.         transform: rotate(15deg);
    
15.         animation: fly 4s infinite alternate var(--state);
    
16. }
    
17. #mydiv::before, #mydiv::after {
    
18.         position: absolute;
    
19.         content: '';
    
20.         border-radius: 100%;
    
21.         background: darkgreen;
    
22.         top: -5px;
    
23.         animation: rot .5s infinite linear var(--state);
    
24. }
    
25. #mydiv::before {
    
26.         width: 100px;
    
27.         height: 10px;       
    
28. }
    
29. #mydiv::after {
    
30.         width: 10px;
    
31.         height: 100px;
    
32.         left: calc(50% - 5px);
    
33.         top: -50px;
    
34. }
    
35. @keyframes fly {
    
36.         10% { top: 180px; left: 5px; }
    
37.         20% { top: 170px; left: 20px; }
    
38.         50% { top: 180px; left: 10px; }
    
39. }
    
40. @keyframes rot {
    
41.         from { transform: rotateX(60deg) rotateZ(0); }
    
42.         to { transform: rotateX(60deg) rotateZ(360deg); }
    
43. }
    
44. </style>
    
45. 
    
46. <div id="mydiv"></div>
    
47. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1903929629" loop autoplay></audio>
    
48. 
    
49. <script>
    
50. let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
51. aud.addEventListener('play', mState, false);
    
52. aud.addEventListener('pause', mState, false);
    
53. mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
54. </script>
    

复制代码

红影

好玩，还给它装了个小风扇，让它飞起来了

红影

这么蠢蠢欲动的，这是准备飞哪去啊

马黑黑

红影 发表于 2023-3-28 19:47
好玩，还给它装了个小风扇，让它飞起来了

螺旋桨

马黑黑

红影 发表于 2023-3-28 19:48
这么蠢蠢欲动的，这是准备飞哪去啊

你猜

小九

直升飞机

马黑黑

小九 发表于 2023-3-28 20:00
直升飞机

黑氏的

小辣椒

又有新的好玩的即将腾空出世

马黑黑

小辣椒 发表于 2023-3-28 21:15
又有新的好玩的即将腾空出世

已经出来了

红影

马黑黑 发表于 2023-3-28 19:50
螺旋桨

嗯嗯，我用词不对

红影

马黑黑 发表于 2023-3-28 19:51
你猜

这个飞行器好，让我以前对边框的理解的错误都暴露出来了，之前居然错得那么离谱

马黑黑

红影 发表于 2023-3-28 22:15
这个飞行器好，让我以前对边框的理解的错误都暴露出来了，之前居然错得那么离谱

边框其实也很神奇

马黑黑

红影 发表于 2023-3-28 22:14
嗯嗯，我用词不对

不过也像是风扇叶

庶民

这个有趣。

红影

马黑黑 发表于 2023-3-28 22:35
边框其实也很神奇

看到你飞天的那个帖子，忽然想起，我昨天就忙着去理解边框了，都没注意这里的飞起来是如何运作的。

红影

马黑黑 发表于 2023-3-28 22:35
不过也像是风扇叶

哦，我知道了，伪元素放的就是螺旋桨，而且是倾斜一定角度的。
为什么飞行器和螺旋桨倾斜角度不一样？嗯，我去想想。

马黑黑

红影 发表于 2023-3-29 09:34
哦，我知道了，伪元素放的就是螺旋桨，而且是倾斜一定角度的。
为什么飞行器和螺旋桨倾斜角度不一样？嗯 ...

飞行器主体实际是2d旋转就行了，螺旋桨则需要3d旋转，尽管这里无需设置景深

马黑黑

红影 发表于 2023-3-29 09:29
看到你飞天的那个帖子，忽然想起，我昨天就忙着去理解边框了，都没注意这里的飞起来是如何运作的。

飞行器主体的飞行状态容易设定的：上一点、下一点，左一点右一点，这就成了

红影

马黑黑 发表于 2023-3-29 12:00
飞行器主体实际是2d旋转就行了，螺旋桨则需要3d旋转，尽管这里无需设置景深

嗯，螺旋桨是在3d状态下的。