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

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

核心属性

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

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

查看所有标签

猜你喜欢:

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

码农书籍

PHP for the World Wide Web, Second Edition (Visual QuickStart Gu

Larry Ullman / Peachpit Press / 2004-02-02 / USD 29.99

So you know HTML, even JavaScript, but the idea of learning an actual programming language like PHP terrifies you? Well, stop quaking and get going with this easy task-based guide! Aimed at beginning ......一起来看看《PHP for the World Wide Web, Second Edition (Visual QuickStart Gu》这本书的介绍吧!

码农工具

Base64 编码/解码

html转js在线工具

HEX CMYK 转换工具

HEX CMYK 互转工具