风琴导航的颜色变化

开发工具与关键技术：DW与CSS+CSS3
作者：刘华叶
撰写时间：2019年2月20日

我们有时会用到风琴导航，却不知道怎么让它变得好看一点，我们可以给它加点CSS3动画，让它的颜色不断的变化。

这个HTML代码比较简单，首先给它设置一个盒子，里面放入a标签，在放一个em标签，加入内容就可以了，下面都是一样，后面几个设置个类就可以了。

在CSS代码里面设置盒子的宽高，固定定位，下面就在给a标签设置属性，在设置一个伪类，后面再设置移动的速度。

然后在设置CSS3动画，首先给这些类和标签设置动画名称，动画时间，过渡效果，无限循环，在设置一个关键帧，在“0%”到“100%”之间创建多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。效果如下，当鼠标移入进去，风琴导航就会移动，还有伪类效果，希望对大家有所帮助。