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

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

核心属性

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;
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

Rework

Jason Fried、David Heinemeier Hansson / Crown Business / 2010-3-9 / USD 22.00

"Jason Fried and David Hansson follow their own advice in REWORK, laying bare the surprising philosophies at the core of 37signals' success and inspiring us to put them into practice. There's no jarg......一起来看看《Rework》这本书的介绍吧!

码农工具

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

核心属性

Rework

随机密码生成器

MD5 加密

SHA 加密