仅使用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);
}