CSS3 圆形发光的效果类似于月光发光

Question

我正在尝试创建一个带有光晕效果的月亮，与图片中的相同。

我已经尝试过，但没有取得太大的成功。

我不想在网站上使用图片。我只想使用CSS3来实现这个效果。

我的圆形半径很小，而且发光区域也很小。我希望发光区域的半径更大

http://jsfiddle.net/naresh_kumar/ezUfG/6/

HTML

<div>
    <span>Glow</span>
</div>

CSS

div {
    margin: 20px 10px 10px;
    text-align: center;
    font-family: sans-serif;
}

span {
    display: inline-block;
    padding-top: 40px;
    background: whiteSmoke;
    width: 100px;
    height: 60px;
    text-align: center;
    vertical-align: middle;

    -webkit-box-shadow: 0 0 10px #F8A50E;
       -moz-box-shadow: 0 0 10px #F8A50E;
            box-shadow: 0 0 10px #F8A50E;

    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;

    -webkit-transition: box-shadow .4s ease;
       -moz-transition: box-shadow .4s ease;
        -ms-transition: box-shadow .4s ease;
         -o-transition: box-shadow .4s ease;
            transition: box-shadow .4s ease;
}

span:hover {
    -webkit-box-shadow: 0 0 10px red;
       -moz-box-shadow: 0 0 10px red;
            box-shadow: 0 0 0 10px red;
}

- John Harper

---

我不知道你在HTML中做了什么。请将CSS与HTML分开。 - kleinfreund

此外，我认为您可以安全地省略 box-shadow 的 -moz 前缀（支持表），以及过渡效果的 -moz、-ms 和 -o 前缀（支持表）。编辑： border-radius 不再需要前缀。;) - kleinfreund

Answer 1

使用box-shadow :)

这个例子使用了两个逗号分隔的阴影：

  box-shadow:0 0 50px gold,0 0 150px gold;

您也可以使用径向渐变进行绘制。 结果会因浏览器而异。

http://codepen.io/gcyrillus/pen/qdcos

- G-Cyrillus

---

谢谢。你能否更清楚地指导我解决这个问题？ - John Harper

你的阴影需要更大，并且为了加强它，你需要使用多个阴影，这样它不会太快消失。在这个例子中，两个阴影重叠了前50像素。你甚至可以通过第四个参数 box-shadow:0 0 50px 10px gold,0 0 150px 10px gold 来增加效果；阴影的前10像素将具有非常高的不透明度（接近1）。 - G-Cyrillus

Answer 2

不要使用这种样式来设置你的 box-shadow：

box-shadow: 0 0 0 10px red;

试试这个：

box-shadow: 0 0 10px red;

编辑： 如果你想让发光变得更大，只需增加半径：

box-shadow: 0 0 30px red;

在这里查看jsFiddle

- George

---

我的圆形创建得非常小，发光也只在很小的区域内。我想让它在更大半径的区域内发光。先生，更新在哪里？ - John Harper

更新已完成，只需点击“这里的jsFiddle”即可。 - George

你的链接是创建这个链接的吗 http://jsfiddle.net/ezUfG/9/ 这是你的链接吗？并且没有任何更新。 - John Harper

这是你的fiddle的更新。我的答案解释了如何解决你的问题，链接是我解释的一个例子。 - George

这并不是“参数太多”的问题，box-shadow可以接受四个数字参数和颜色。第四个数字表示“非渐变扩展”（尽管这是一个完全虚构的定义，但这是最好的描述方式）。 - David Thomas

@F4r-20，好的，谢谢。我明白了。但是我的问题不同。 - John Harper

Answer 3

我相信这就是你想要的：

span:hover {
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    border-radius: 70px;   
    -webkit-box-shadow:0px 0px 10px red;
    -moz-box-shadow: 0px 0px 10px red;
    box-shadow: 0px 0px 10px red;
}

演示：http://jsfiddle.net/ezUfG/10/

- 0x_Anakin