仅使用CSS对文本进行变形镜头眩光效果

Question

我知道可以使用文本阴影对文本进行整体"霓虹"效果,但是可以给文本提供更加不对称的"水平"类型光晕,如电影中所见,通常被称为变形镜头光晕？(见例).

编辑:

这是一个例子http://dabblet.com/gist/11479993

此处的文字显示了四个级别的文本阴影,使用模糊来近似围绕它的对称"发光".有没有办法只在左右两侧增加这种效果,这样就会产生一种水平状的发光效果,它会聚成一个贯穿文本中间的假想水平轴.

这是我正在使用的CSS:

.outer {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: black;
}
.inner {
    position: relative;
    margin: 0 auto;
    height: 90px;
    width: 90px;
    background-color: blue;
}
.float {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 10px;
    width: 10px;
    background-color: yellow;
}
.text {
    color: white;
    font-size: 2em;
    text-align: center;
    text-shadow: 2px 1px 150px #FFF, 2px 0 60px #FFF, 2px 0 5px #FFF;
}

和HTML:

<div class='outer'>
    <div class='text'>s</div>
</div>

Answer 1

您可以在 CSS 中创建一个或多个省略号。

您需要添加渐变作为颜色来模拟您的效果。

这里只是一个简单的例子：

http://jsfiddle.net/w2rcy270/2/

#effect {
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    background: rgb(240, 183, 161);
    background: -moz-radial-gradient(center, ellipse cover, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 48%, rgba(191, 110, 78, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(240, 183, 161, 1)), color-stop(48%, rgba(140, 51, 16, 1)), color-stop(100%, rgba(191, 110, 78, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 48%, rgba(191, 110, 78, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 48%, rgba(191, 110, 78, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 48%, rgba(191, 110, 78, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 48%, rgba(191, 110, 78, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0b7a1', endColorstr='#bf6e4e', GradientType=1);
}