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

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

核心属性

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

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

查看所有标签

猜你喜欢:

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

码农书籍

超越门户

吴晨光 / 中国人民大学出版社 / 2015-4-17 / 39.80

在这个PC端影响力下降、人们对手机的依赖与日俱增的时代，这种探索的意义非同寻常，可以说是试图树立新媒体时代的行业标准。 ——陈彤（小米内容投资与运营副总裁、新浪网前总编辑、资深网络媒体人）我将对此书的阅读，视作对往日岁月的怀念，它提醒我，自己曾投身于多么富有蓬勃朝气和探索精神的事业。而对这种事业的原则、逻辑和方法的继承和继续学习，对于互联网时代的企业形象塑造，同样有融会变通的参考......一起来看看《超越门户》这本书的介绍吧!

码农工具

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

核心属性

超越门户

在线进制转换器

图片转BASE64编码

XML 在线格式化