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 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 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
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python 字符串池化的前提
2020/07/03 Python
python中time tzset()函数实例用法
2021/02/18 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
如何写一个自定义标签
2012/12/28 面试题
2015暑假社会调查报告
2015/07/13 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL