CSS3实现菜单悬停效果


Posted in HTML / CSS onNovember 17, 2020

实现效果:

CSS3实现菜单悬停效果

html

<nav id="nav-1">
  <a class="link-1" href="#">Home</a>
  <a class="link-1" href="#">About</a>
  <a class="link-1" href="#">Contact</a>
  <a class="link-1" href="#">Shop</a>
</nav>

<nav id="nav-2">
  <a class="link-2" href="#">Home</a>
  <a class="link-2" href="#">About</a>
  <a class="link-2" href="#">Contact</a>
  <a class="link-2" href="#">Shop</a>
</nav>

<nav id="nav-3">
  <a class="link-3" href="#">Home</a>
  <a class="link-3" href="#">About</a>
  <a class="link-3" href="#">Contact</a>
  <a class="link-3" href="#">Shop</a>
</nav>

css

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
#nav-1 {
  background: #3fa46a;
}
#nav-2 {
  background: #5175C0;
}
#nav-3 {
  background: #EEA200;
}

.link-1 {
  transition: 0.3s ease;
  background: #3fa46a;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #3fa46a;
  border-bottom: 4px solid #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
.link-1:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0; 
}

.link-2 {
  transition: 0.6s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-right: 2px dotted transparent;
  padding: 30px 8px 0 10px;
  margin: 0 10px;
}
.link-2:hover {
  border-right: 2px dotted #ffffff;
  padding-bottom: 24px;
}
.link-3 {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.link-3:hover {
  background-color: #ffffff;
  color: #EEA200;
  padding: 24px 10px;
}

以上就是CSS3实现菜单悬停效果的详细内容,更多关于css3 菜单悬停的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 HTML / CSS
详解CSS3:overflow属性
Nov 17 #HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 #HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 #HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 #HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 #HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 #HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 #HTML / CSS
You might like
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
让Firefox支持event对象实现代码
2009/11/07 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
node文件批量重命名的方法示例
2017/10/23 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python实现新浪博客备份的方法
2016/04/27 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
详解python中eval函数的作用
2019/10/22 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
Django celery异步任务实现代码示例
2020/11/26 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
承诺书怎么写
2014/03/26 职场文书
程序员求职信
2014/04/16 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
科学发展观标语
2014/10/08 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书