我在左側有一個固定的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

相關問題