css水平条的动态模糊效果

Question

将 photoshop 设计转换为css：

时遇到一些问题

预期效果 :(使用 photosohp ，drop shadow + motion blur effect完成）

当前效果（css）：

css for current effect：

.horizontal_separator {
    height: 1px;
    display : block;
    border: 0;
    border-top: 1px solid #100f0b;
    margin: 1em 0;
    padding 0;
    box-shadow: 0px -1px 0px #2c2626;
}

Answer 1

@karim我创造了一个小提琴请检查https://jsfiddle.net/3kn7vxk1/2/

.horizontal_separator {
  position: relative;
  height: 1px;
  display: block;
  border: 0;
  background: -moz-linear-gradient(left, rgba(125, 185, 232, 0) 0%, rgba(16, 15, 11, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(125, 185, 232, 0) 0%, rgba(16, 15, 11, 1) 100%);
   background: linear-gradient(to right, rgba(125, 185, 232, 0) 0%, rgba(16, 15, 11, 1) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#100f0b', GradientType=1);
  margin: 1em 0;
   padding 0;

}

Answer 2

您可以使用css渐变来实现此目的。继承人JSFiddle

你的css是：

.horizontal_separator {
    height: 3px;
    display : block;
    border: 0;
    background: -webkit-linear-gradient(left, #666, #000, #666);
    background: -moz-linear-gradient(left, #666, #000, #666);
    background: -o-linear-gradient(left, #666, #000, #666);
    background: linear-gradient(to right, #666, #000, #666);
    margin: 1em 0;
    padding 0;
    box-shadow: 0px -1px 0px #333;
    filter: blur(1px);
    -webkit-filter: blur(1px);
}