论坛 › 马黑黑教程专版 › 看看晕不晕

马黑黑 发表于 2023-2-8 18:03

看看晕不晕

本帖最后由 马黑黑 于 2023-2-9 12:29 编辑 <br /><br /><style>
#mydiv {
        --angle1: 0;
        --angle2: 360deg;
        --state: paused;
        margin: 50px auto;
        position: relative;
        width: 200px;
        height: 200px;
        background: url('https://638183.freep.cn/638183/t23/1/fgie1.png') no-repeat center/cover;
        cursor: pointer;
        animation: rot 10s linear infinite;
        animation-play-state: var(--state);
}
#mydiv::before, #mydiv::after {
        --angle1: 360deg;
        --angle2: 0;
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: url('https://638183.freep.cn/638183/t23/1/fgie2.png') no-repeat center/cover;
        animation: rot 6s linear infinite;
        animation-play-state: var(--state);
}
#mydiv::after {
        --angle1: 0;
        --angle2: 360deg;
        background: url('https://638183.freep.cn/638183/t23/1/fgie3.png') no-repeat center/cover;
        animation-duration: 16s;
}
@keyframes rot {
        0% { transform: rotate(var(--angle1)); }
        100% { transform: rotate(var(--angle2)); }
}
</style>

<div id="mydiv"></div>

<script>
let flag = true;
mydiv.addEventListener('click', () => {
        mydiv.style.setProperty('--state', flag ? 'running' : 'paused');
        flag = !flag;
});
</script>

马黑黑 发表于 2023-2-8 18:04

代码：
<style>
#mydiv {
        --angle1: 0;
        --angle2: 360deg;
        --state: paused;
        margin: 50px auto;
        position: relative;
        width: 200px;
        height: 200px;
        background: url('/forum.php?mod=attachment&aid=NDQwMzZ8MjFmNWY2YTJ8MTY3NTg1MDQwNHw3MTMwfDU2MzQ3&noupdate=yes') no-repeat center/cover;
        cursor: pointer;
        animation: rot 10s linear infinite;
        animation-play-state: var(--state);
}
#mydiv::before, #mydiv::after {
        --angle1: 360deg;
        --angle2: 0;
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: url('/forum.php?mod=attachment&aid=NDQwMzd8NjY3YzBlNTF8MTY3NTg1MDQwNHw3MTMwfDU2MzQ3&noupdate=yes') no-repeat center/cover;
        animation: rot 6s linear infinite;
        animation-play-state: var(--state);
}
#mydiv::after {
        --angle1: 0;
        --angle2: 360deg;
        background: url('/forum.php?mod=attachment&aid=NDQwMzh8ZDJhNGNkY2J8MTY3NTg1MDQwNHw3MTMwfDU2MzQ3&noupdate=yes') no-repeat center/cover;
        animation-duration: 16s;
}
@keyframes rot {
        0% { transform: rotate(var(--angle1)); }
        100% { transform: rotate(var(--angle2)); }
}
</style>

<div id="mydiv"></div>

<script>
let flag = true;
mydiv.addEventListener('click', () => {
        mydiv.style.setProperty('--state', flag ? 'running' : 'paused');
        flag = !flag;
});
</script>

庶民 发表于 2023-2-8 18:16

好像电脑里的风扇。

梦油 发表于 2023-2-8 18:16

逆向旋转——晕了。

马黑黑 发表于 2023-2-8 18:55

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

正常，不晕飞机就好{:4_170:}

马黑黑 发表于 2023-2-8 18:55

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

确实很像

樵歌 发表于 2023-2-8 19:16

俺盯着好一阵竟然没晕{:4_203:}

马黑黑 发表于 2023-2-8 19:26

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

你要让它转动起来

红影 发表于 2023-2-8 19:36

有逆时针转的，有顺时针转的，真漂亮{:4_187:}

醉美水芙蓉 发表于 2023-2-8 19:39

梦油 发表于 2023-2-8 20:37

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

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

马黑黑 发表于 2023-2-8 20:40

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

对，会慢慢适应

马黑黑 发表于 2023-2-8 20:40

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

你坚强{:4_170:}

马黑黑 发表于 2023-2-8 20:41

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

这个创意还是可以的

梦油 发表于 2023-2-8 20:54

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

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

樵歌 发表于 2023-2-8 20:54

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

点动了呵。俺当过海军，练过{:4_189:}

马黑黑 发表于 2023-2-8 20:59

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

酱紫

马黑黑 发表于 2023-2-8 20:59

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

习惯成自然

梦油 发表于 2023-2-8 21:12

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

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

马黑黑 发表于 2023-2-8 21:58

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

也没必要改

查看完整版本: 看看晕不晕