我在左侧有一个固定的 100% 高度菜单,我需要在其右侧创建一个阴影效果,该效果会在一段时间后消失。
请参见说明这一点的图。
如何创建这种效果?
这是一个 fiddle :http://jsfiddle.net/52VtD/7787/
HTML:
<nav id="main-menu">
<h1>Hello</h1>
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
</nav>
CSS:
#main-menu {
width: 320px;
height: 100%;
top: 0;
z-index: 1000;
position: fixed;
background-color: #b4bac1;
}
最佳答案
您可以使用 CSS3 实现此目的:box-shadow
和 transform
。
在下面的示例中,box-shadow
应用于 .menuContainer
的伪元素,它位于 .menu
元素下方,并且是使用 CSS3s rotate()
变换属性旋转 1°
。
html,body { /* This is only here to allow the menu to stretch to 100% */
height: 100%;
margin: 0;
}
.menuContainer {
position: relative;
height: 100%;
width: 100px;
}
.menuContainer::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
bottom: 0;
left: -7px;
background: rgba(0,0,0,0.3);
box-shadow: 10px 0 10px 0 rgba(0,0,0,0.3);
width: 100px;
transform: rotate(1deg);
}
.menu {
background: #f00;
height: 100%;
width: 100px;
position: relative;
z-index: 2;
}
<div class="menuContainer">
<div class="menu"></div>
</div>
JSFiddle
关于html - CSS:框右侧的旋转阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25607704/