如何使用CSS创建运动模糊效果?

时间:2017-12-05 10:04:42

标签: css css3

通过应用多个盒子阴影,我可以很好地处理具有纯色背景的对象:

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)}

这不是理想的,因为你会从元素而不是向左上下阴影,但是它有点起作用。

但我真正想要的是它可以很好地处理背景图像,例如:在this jsFiddle中,我希望div(或至少背景图像的边缘)边缘的颜色可以伸展出来。

我该怎么做? 可以我吗?

谢谢

1 个答案:

答案 0 :(得分:3)

您可以添加::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>