我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

前言

大家好，我是不吃鱼d猫，活动快结束了，码农只有周末才能写写文章，今天用css伪类实现一把扇子，虽然在开发的过程中，常用UI组件，但是我们也需要能够去修改组件内的样式。

css伪类

CSS伪类是用来添加一些选择器的特殊效果。比如我们经常使用到的hover（鼠标移入移出），常用于很多场景，鼠标移出移出带来的变化

 a:hover{
        color: red;
    }
<div>
    <a href="#">我是一个链接</a>
</div>

鼠标移入后文字会变成红色，如图所示

bandicam 2022-06-12 20-50-27-963_.gif
可以看到我们在移入链接的时候文字颜色有蓝色变成了红色，移出鼠标文字的颜色又恢复了。

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意的是，在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。，只有鼠标移入了才能够点击。我们来看例子

 a:link{
        color: blue;
    }
    a:visited{
        color: yellow;
    } 
    a:hover{
        color: red;
    }
    a:active{
        color: green;
    }

链接在未访问前是蓝色的，在鼠标移入后变成了红色，是可恢复的。在点击的过程中，也就是鼠标按下还未抬起的时刻，文字的颜色是有active伪类来决定的，也就是绿色。点击完成后，也就是代表着该链接已访问，那么此时visited伪类就代表着该链接已访问，那么就不会出现连接未访问的状态。如上图所示。

扇子的实现

在移入li标签后，hover伪类起作用了，进行想应的动画，旋转，放大，等一些常见的动画，前面的文章我有说过动画，大家可以去看看
其中也遇到一个伪类选择器:nth-child()这样我们就不用在操作css的时候对于同个元素class命名去选中了，例如li:nth-child(13)就代表着该html中li标签同级的第13个li标签元素。

总结

css虽然基础，其实很重要，毕竟人靠衣装，马靠鞍。我们开发的项目也是需要美观的，纯css也能实现非常厉害的效果，给大家推荐一个纯css实现炫酷效果的网站

夏日炎炎，除了西瓜应该还有扇子吧

前言

css伪类

扇子的实现

总结