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

栏目: 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;
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

正当法律程序简史

(美)约翰·V.奥尔特 / 杨明成、陈霜玲 / 商务印书馆 / 2006-8 / 14.00元

本书的主题——正当法律程序，是英美法的核心概念，它使诸如法治、经济自由、个人自治以及免于政府专断行为的侵害等价值观念具体化，因而是法学领域一个永恒的主题，数百年以来一直是法学家、法官及律师关注的重点。本书以极为简洁、精确的语言总结了五百年法律发展的恢弘历史，为人们描述了正当法律程序观念发展演变的清晰轨迹。而沿着这条轨迹，人们可以准确地了解正当法律程序这一重要概念所包含的广泛的问题。作为一本......一起来看看《正当法律程序简史》这本书的介绍吧!

码农工具

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

核心属性

正当法律程序简史

图片转BASE64编码

Base64 编码/解码

RGB HSV 转换