论坛 › 马黑黑教程专版 › 水吧飞行器起飞

马黑黑 发表于 2023-3-28 19:37

水吧飞行器起飞

<style>
#mydiv {
        --state: running;
        position: relative;
        top: 200px;
        width: 100px;
        height: 120px;
        border-style: solid;
        border-color: transparent transparent hsla(120, 70%,50%, .25) transparent;
        border-width: 20px 120px 120px 120px;
        border-radius: 50%;
        box-shadow: 20px 20px 30px green inset, -20px -20px 30px green inset;
        cursor: pointer;
        transform: rotate(15deg);
        animation: fly 4s infinite alternate var(--state);
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        border-radius: 100%;
        background: darkgreen;
        top: -5px;
        animation: rot .5s infinite linear var(--state);
}
#mydiv::before {
        width: 100px;
        height: 10px;       
}
#mydiv::after {
        width: 10px;
        height: 100px;
        left: calc(50% - 5px);
        top: -50px;
}
@keyframes fly {
        10% { top: 180px; left: 5px; }
        20% { top: 170px; left: 20px; }
        50% { top: 180px; left: 10px; }
}
@keyframes rot {
        from { transform: rotateX(60deg) rotateZ(0); }
        to { transform: rotateX(60deg) rotateZ(360deg); }
}
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1903929629" loop autoplay></audio>

<script>
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2023-3-28 19:38

代码
<style>
#mydiv {
        --state: running;
        position: relative;
        top: 200px;
        width: 100px;
        height: 120px;
        border-style: solid;
        border-color: transparent transparent hsla(120, 70%,50%, .25) transparent;
        border-width: 20px 120px 120px 120px;
        border-radius: 50%;
        box-shadow: 20px 20px 30px green inset, -20px -20px 30px green inset;
        cursor: pointer;
        transform: rotate(15deg);
        animation: fly 4s infinite alternate var(--state);
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        border-radius: 100%;
        background: darkgreen;
        top: -5px;
        animation: rot .5s infinite linear var(--state);
}
#mydiv::before {
        width: 100px;
        height: 10px;       
}
#mydiv::after {
        width: 10px;
        height: 100px;
        left: calc(50% - 5px);
        top: -50px;
}
@keyframes fly {
        10% { top: 180px; left: 5px; }
        20% { top: 170px; left: 20px; }
        50% { top: 180px; left: 10px; }
}
@keyframes rot {
        from { transform: rotateX(60deg) rotateZ(0); }
        to { transform: rotateX(60deg) rotateZ(360deg); }
}
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1903929629" loop autoplay></audio>

<script>
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2023-3-28 19:47

好玩，还给它装了个小风扇，让它飞起来了{:4_173:}

红影 发表于 2023-3-28 19:48

这么蠢蠢欲动的，这是准备飞哪去啊{:4_189:}

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

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

螺旋桨

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

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

你猜

小九 发表于 2023-3-28 20:00

直升飞机

马黑黑 发表于 2023-3-28 20:01

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

黑氏的

小辣椒 发表于 2023-3-28 21:15

又有新的好玩的即将腾空出世{:4_170:}

马黑黑 发表于 2023-3-28 21:18

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

已经出来了

红影 发表于 2023-3-28 22:14

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

嗯嗯，我用词不对{:4_173:}

红影 发表于 2023-3-28 22:15

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

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

马黑黑 发表于 2023-3-28 22:35

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

边框其实也很神奇

马黑黑 发表于 2023-3-28 22:35

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

不过也像是风扇叶

庶民 发表于 2023-3-29 06:17

这个有趣。

红影 发表于 2023-3-29 09:29

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

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

红影 发表于 2023-3-29 09:34

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

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

马黑黑 发表于 2023-3-29 12:00

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

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

马黑黑 发表于 2023-3-29 12:01

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

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

红影 发表于 2023-3-29 14:32

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

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

查看完整版本: 水吧飞行器起飞