头部导航栏简单制作

头部导航栏

 

 

 

 导航栏基础框架

html代码如下

 

CSS代码如下：

 

导航栏我使用了：hover和transform动画制作

在独立思考和查看以往代码时想到了使用：hover和transform来实现或者使用jquery来实现

深思熟虑后选择使用：hover和animation动画来实现

导航栏演示效果

效果：

鼠标移入，文字变红，英文出现并下滑，中文上滑

鼠标移出，变回原样