【二次元的CSS】—— 纯CSS3做的能换挡的电扇

big_cat 发布于2019-08-30 13:03 / 1960人阅读

摘要：传送门效果是这样的结构小技巧就是，一开始就写了一组单选按钮来做开关的部分。有个地方需要优化，就是在换挡的时候，动画应该柔和些。

这次分享的电扇，和以往用css3画人物相比多加了一点交互，就是电扇开关的地方，用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。

GitHub传送门：https://github.com/lancer07/css3_fan

效果是这样的

HTML 结构

小技巧就是，一开始就写了一组单选按钮来做开关的部分。把单选按钮的透明度设为0，然后在后面叠加一个div来画开关的样式。

开关部分的LESS代码如下

   .switch{
        position: absolute;
        width: 24px;
        height: 24px;
        top: 296px;
        z-index: 13;
        opacity: 0;
        cursor: pointer;
    }

   .switch_0{
        .switch;
        left: 50px;
        &:checked+div{
            &+input+div+input+div+input+div+.mask{
                .leafs{
                    animation-play-state:paused;
                }
            }
        }
    }
    .switch_1{
        .switch;
        left: 75px;
        &:checked+div{
            background: #a9af27;
            color: #0e6873;
            &+input+div+input+div+.mask{
                .leafs{
                    animation-duration : 0.7s
                }
            }
        }
    }
    .switch_2{
        .switch;
        left: 100px;
        &:checked+div{
            background: #a9af27;
            color: #0e6873;
            &+input+div+.mask{
                .leafs{
                    animation-duration : 0.4s
                }
            }
        }
    }
    .switch_3{
        .switch;
        left: 125px;
        &:checked+div{
            background: #a9af27;
            color: #0e6873;
            &+.mask{
                .leafs{
                    animation-duration : 0.3s
                }
            }
        }
    }

看起来有点low。

至于电扇的CSS样式部分就不再赘述了。

有个地方需要优化，就是在换挡的时候，动画应该柔和些。有同学想到用什么办法优化下吗？

云服务器 GPU云服务器二次元api 二次元网站上云服务器浏览器对和css3的支持 css3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115265.html

【二次元的CSS】—— 纯CSS3做的能换挡的电扇

摘要：传送门效果是这样的结构小技巧就是，一开始就写了一组单选按钮来做开关的部分。有个地方需要优化，就是在换挡的时候，动画应该柔和些。这次分享的电扇，和以往用css3画人物相比多加了一点交互，就是电扇开关的地方，用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。 GitHub传送门：https://github.com/lancer07/css3_fan 效...

Cruise_Chan 2019-08-02 15:54 评论0 收藏0
【二次元的CSS】—— CSS3画的能换频道的电视机（合集）

摘要：帮大家回忆一下，小时候的电视机。每到星期二的下午，总是这个图案。传送门这次分步来做，先画电视机，再画没有信号的界面。这次绝笔之作中，把之前所有用画的东西都放进电视机里了。所以电视机是可以切换频道的。这次不贴代码了，有点多。帮大家回忆一下，小时候的电视机。每到星期二的下午，总是这个图案。 GitHub传送门：https://github.com/lancer07/css3TV 这次分2...

LeviDing 2019-08-02 15:55 评论0 收藏0
【二次元的CSS】—— CSS3画的能换频道的电视机（合集）

摘要：帮大家回忆一下，小时候的电视机。每到星期二的下午，总是这个图案。传送门这次分步来做，先画电视机，再画没有信号的界面。这次绝笔之作中，把之前所有用画的东西都放进电视机里了。所以电视机是可以切换频道的。这次不贴代码了，有点多。帮大家回忆一下，小时候的电视机。每到星期二的下午，总是这个图案。 GitHub传送门：https://github.com/lancer07/css3TV 这次分2...

elliott_hu 2019-08-30 13:02 评论0 收藏0