触发动画的事件选择鼠标事件,CSS中的鼠标事件有几种:
1.div:link{}正常状态
2.div:hover{}鼠标滑过,常用
3.div:visited{}访问过后
4.div:active{}按下
5.div:focus{}鼠标保持点击后移开
在style中对需要过渡动画的元素新建 :hover的新样式,加入想要改变的内容即可
.menu li.menu-item a{
text-decoration: none;
color:green;
}
.menu li.menu-item a:hover
{
color :aqua;
}
效果如下
同理,设置导航栏的背景色块,然后通过hover改变样式就可以实现导航栏随鼠标滑过变化的效果了。
不过需要主义的是,color属性控制的是内部字体的颜色,li块的颜色需要通过background-color修改
明天考虑下加上渐变透明等
原文:https://www.cnblogs.com/Stratford-International/p/11961013.html