风琴导航的颜色变化

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

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

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

风琴导航的颜色变化
风琴导航的颜色变化
风琴导航的颜色变化
在CSS代码里面设置盒子的宽高,固定定位,下面就在给a标签设置属性,在设置一个伪类,后面再设置移动的速度。

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

风琴导航的颜色变化
风琴导航的颜色变化