纵向带图片覆盖显示的菜单效果

栏目: Html · 发布时间: 7年前

核心属性

padding-top: 300px 为图片的显示留下空间

text-shadow 文字阴影效果，使文字看起来更立体

:hover + transition + border-left-width 悬停菜单项时左侧的蓝色竖线变宽动画

border-radius: 50% + overflow: hidden 将图片变为圆形

box-shadow 给图片增加边框

:hover + transition + opacity 悬停菜单项时显示对应的图片效果

绝对定位元素默认按照顺序层叠，再加上opacity的透明效果，所以z-index属性是不需要的。并且在CSS3中，当opacity的值不为1时，会创建一个层叠上下文，所以也可以使用opacity:.9;来提高层叠级别。

```
<nav id="k-nav">
```

<a href="#">主页<img src="https://pics.codecolor.cn/overlapping-image-navigation/watch.jpg" alt="Photograph of a watch"></a>

<a href="#">关于<img src="https://pics.codecolor.cn/overlapping-image-navigation/kalina-whyte.jpg" alt="Photograph of Kalina Whyte"></a>

<a href="#">文件<img src="https://pics.codecolor.cn/overlapping-image-navigation/rocks.jpg" alt="Photographs of rocks"></a>

<a href="#">联系<img src="https://pics.codecolor.cn/overlapping-image-navigation/mail.jpg" alt="Photograph of air mail envelopes"></a>

```
</nav>
```

```
nav#k-nav {
```
```
position: relative;
```
```
width: 300px;
```
```
margin-left: 4em;
```
```
padding-top: 300px;
```
```
padding-bottom: 40px;
```
```
background: #3F3935;
```
```
border-radius: 20px;
```
```
}
```
```
nav#k-nav a {
```
```
box-sizing: border-box;
```
```
display: block;
```
```
padding: 8px 8px 8px 20px;
```
```
border-left: 8px solid #356374;
```
```
border-bottom: 1px dashed #000;
```
```
font-size: 1.4rem;
```
```
color: #CFCECE;
```
```
text-decoration: none;
```

text-shadow: 2px 2px 2px rgba(0,0,0,0.6);

```
transition: .7s all linear;
```
```
}
```
```
nav#k-nav a:hover {
```
```
border-left-width: 20px;
```
```
}
```
```
nav#k-nav a img {
```
```
position: absolute;
```
```
top: 25px;
```
```
left: 25px;
```
```
width: 250px;
```
```
border-radius: 50%;
```
```
opacity: 0;
```
```
overflow: hidden;
```
```
box-shadow: 0 0 0 3px #000;
```
```
transition: .7s all linear;
```
```
}
```
```
nav#k-nav a:first-child img {
```
```
opacity: 1;
```
```
}
```
```
nav#k-nav a:hover img {
```
```
opacity: 1;
```
```
}
```

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

JavaScript面向对象编程指南

斯托扬 / 凌杰 / 人民邮电出版社 / 2013-3 / 59.00元

《JavaScript面向对象编程指南》内容包括：JavaScript作为一门浏览器语言的核心思想；面向对象编程的基础知识及其在JavaScript中的运用；数据类型、操作符以及流程控制语句；函数、闭包、对象和原型等概念，以代码重用为目的的继承模式；BOM、DOM、浏览器事件、AJAX和JSON；如何实现JavaScript中缺失的面向对象特性，如对象的私有成员与私有方法；如何应用适当的编程模式，......一起来看看《JavaScript面向对象编程指南》这本书的介绍吧!

码农工具

纵向带图片覆盖显示的菜单效果

核心属性

JavaScript面向对象编程指南

HTML 压缩/解压工具

SHA 加密

html转js在线工具