我在左侧有一个固定的100％高度菜单，我需要在右侧创建一个阴影效果，这会在一段时间后消失。CSS：盒子右侧的旋转阴影效果

看到说明这一点的图。

enter image description here

如何产生这种效果？

这里是一个小提琴：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; 
}

来源

2014-09-01 Very Curious

如果你有你的psd只是复制你的阴影的值，并粘贴在任何阴影发生器，它肯定会有所帮助。 – Benjamin 2014-09-01 14:16:13

@Benjamin这是问题的简单部分。困难的部分是逐渐垂直消失的阴影。 – timo 2014-09-01 14:16:43

我在搜索结果中发现了这个例子。 http://jsfiddle.net/vBuxt/1/不完全是你想要的，但我认为你可以修改它以满足你的需求。 – timo 2014-09-01 14:29:09

你可以用CSS3实现这一目标：box-shadow和transform。

在box-shadow下面的例子中被施加到坐在.menu元件下面，并且通过使用1°旋转CSS3s变换rotate()属性的.menuContainer伪元件。

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

来源

2014-09-01 14:16:29

这段时间后不会消失，但始终保持从顶部到底部不变。 – 2014-09-01 14:25:15

我认为你误解了这个问题。 OP想要一个逐渐淡出的阴影。没有提到动画。 – timo 2014-09-01 14:26:58

此外，我不认为动画是一个需求...更重要的是，从底部到顶部的不透明度盒子阴影是不一致的。这是一个'角落'的阴影。 – 2014-09-01 14:27:44

你可以伪造其与伪元素，而不是使用的box-shadow如下

JSfiddle Demo

CSS

#main-menu { 
    width: 50px; 
    height: 100%; 
    top: 0; 
    z-index: 1000; 
    position: fixed; 
    background-color: pink; 
} 

#main-menu:after { 
    content:""; 
    position: absolute; 
    top:0; 
    left:100%; 
    height:100%; 
    width:5%; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%); 
}

来源

2014-09-01 14:36:50

当使用线性渐变时，如何使其在边缘模糊？现在边缘很锐利。 – 2014-09-01 14:42:45

您可以尝试使用径向渐变，但渐变不会模糊。 – 2014-09-01 14:43:30

CSS：盒子右侧的旋转阴影效果

回答

JSFiddle

相关问题