css 单杠运动模糊效果

Question

我在将 photoshop 设计转换为 css 时遇到了一些小问题 :

想要的效果：（用photosohp、drop shadow + motion blur effect完成）

当前效果 (css) :

css 当前效果：

.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 我创建了一个 fiddle 请检查 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);
}

css 单杠运动模糊效果

css motion blur effect for horizontal bar

html

css

web

photoshop