砂時計型光るCSS

Question

私は、デザイナーからのイメージを持って、このようになりますこと：

私は、スクロールバーのグリップの背景として（それ1pxの高さ、垂直に繰り返さしたいのですが）。 CSS3を使用して、画像の真ん中に輝くエフェクトをエミュレートする方法はありますか？

よろしく、

Answer 1

次の背景と、その上に別のdivを作成します。もちろん

background-image: linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%); 

、任意の有用であることが、これは次のように書き換えることが必要です。

background-image: linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%); 
    background-image: -o-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%); 
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%); 
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%); 
    background-image: -ms-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);