CSS3实现菜单悬停效果
2020-11-23 04:07
1266 查看
实现效果:
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 菜单悬停的资料请关注脚本之家其它相关文章!
相关文章推荐
- HTML5+CSS3实现iOS Path菜单特效,动画效果很酷
- CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果
- 基于CSS3实现的黑色个性导航菜单效果
- jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
- 分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
- 用CSS3实现Win8风格的方格导航菜单效果
- CSS3实现动态多级菜单效果
- CSS3实现可关闭的下拉手风琴菜单效果
- 纯CSS3实现的鼠标悬停显示遮罩效果
- 只用css3实现菜单的toggle效果
- 用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果
- css3与html5实现响应式导航菜单(导航栏)效果分享
- CSS3无图片实现华丽折页菜单效果(多浏览器兼容)
- CSS3过渡效果实现菜单划出效果
- 纯CSS3实现超酷的鼠标悬停效果
- 纯CSS3实现鼠标悬停提示气泡效果
- iOS边练边学--菜单悬停效果的实现思路
- 33个jQuery与CSS3实现的绚丽鼠标悬停效果
- CSS3实现银灰色动画效果的导航菜单代码
- 纯CSS3实现的动感菜单效果