15种CSS导航悬停特效

来源:https://www.sucaihuo.com/js/2348.html 2017-07-07 22:23浏览(1615) 收藏

15种CSS导航悬停特效,比较适合用于PC端的页面导航,每一种悬停特效都有不同的动画效果,当然了,你完全可以自由调整变化的样式等内容,喜欢的童鞋请收下吧。
15种CSS导航悬停特效
分类:html/css > 按钮 难易:入门级
查看演示 下载资源 下载积分: 20 积分

由于是纯CSS的特效,所以页面的head部分只需要引入一个CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分的结构比较简单,一个div容器里放入多个a标签的按钮,部分代码如下:

<div class="container red topBotomBordersOut">
  <a>官网首页</a>
  <a>新闻动态</a>
  <a>产品服务</a>
  <a>企业文化</a>
  <a>联系我们</a>
</div>

页面的底部可以加一个版权类的内容,参考代码如下:

<footer>
  <span>© 2017 版权所有</span>
</footer>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2