CSSでモーションブラー効果を作成するにはどうすればよいですか？

Question

私は、これは複数のボックスシャドウを適用することにより、固体の背景色を持つオブジェクトの上にきれいに取り組んで持っている：

jsFiddle

HTML：

<div></div> 

CSS：

div{width: 50px; 
    height: 50px; 
    margin: 100px; 
    border-radius: 25px; 
    background: rgb(0,150,0); 
    box-shadow: -15px 0 12px rgba(0,150,0,0.2) 
       , -11px 0 10px rgba(0,150,0,0.4) 
       , -8px 0 8px rgba(0,150,0,0.6) 
       , -6px 0 6px rgba(0,150,0,0.8)} 

を

これは理想的ではありませんが、左からではなく要素から上下に影が出てきますが、 b。

しかし、私が本当に欲しいのは、それがバックグラウンド画像でうまく動作することです。 in this jsFiddlediv（または少なくとも背景画像の端）の端にある色を伸ばしたいと思います。

どうすればいいですか？ Can私は？

あなたは

Answer 1

あなたは、あなたの要素を複製し、それをぼかし::beforeを追加することができますありがとうございます。

div{ 
 
    position: relative; 
 
    width: 50px; 
 
     height: 50px; 
 
     margin: 100px; 
 
     border-radius: 25px; 
 
     background: url(https://i.imgur.com/pDj7wo9.png); 
 
     background-size: cover; 
 
     background-position: left center; 
 
} 
 

 
div::before { 
 
    background: url(https://i.imgur.com/pDj7wo9.png); 
 
    background-size: cover; 
 
    background-position: left center; 
 
    position: absolute; 
 
    width: 55px; 
 
    height: 55px; 
 
    overflow: hidden; 
 
    z-index: -1; 
 
    filter: blur(5px); 
 
    content: ""; 
 
    border-radius: 100%; 
 
}

<div></div>