css3圆发光像月光

前端之家收集整理的这篇文章主要介绍了css3圆发光像月光前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正试图用光辉来创造一个月亮.与图像相同.

我已经尝试过但没有太大的成功.

我不想在网站上使用图像.我想用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;
}

解决方法

使用Box-shadow

猜你在找的CSS相关文章