如何用jquery做一个div发光

时间:2013-03-17 11:24:55

标签: jquery html colors glow

我想知道如何在页面加载时以特定颜色制作div发光。

<div id="glow" class="logo registrer"><a href="http://henricson.net/registrer.php" class="understrek">Registrer deg</a></div>

这是我想发光的div。 谢谢:))

3 个答案:

答案 0 :(得分:7)

CSS3可以做到这一点:

-webkit-box-shadow:0 0 20px blue; 
-moz-box-shadow: 0 0 20px blue;
box-shadow:0 0 20px blue;

这是一个JSFiddle,它表明它确实与我一起工作正常,请查看以下内容:)

答案 1 :(得分:3)

我不确定你是怎么发光的?如果只是改变颜色,那么你可以做类似下面的事情。

$(document).ready(function(){
   $('#glow').animate({backgroundColor:'green'});
});

然后,您可以添加一些box-shadow来添加发光效果。

-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 150, 0, 0.3);
box-shadow: 0px 0px 5px 5px rgba(0, 150, 0, 0.3);

请参阅此示例fiddle添加了动画背景颜色和阴影。

修改

抱歉,我忘了提及你需要包含color animation plugin才能执行此操作。

此外还有另一个fiddle在半秒后运行,然后消除了发光......显然这需要很多调整才能让它看起来不错。

答案 2 :(得分:1)

<div class="col-md-6 col-md-offset-3" id="notificationmain">
  <div class="sub"><blockquote id="notification" class="alert alert-success" glowing="0">User Has been created</blockquote></div>  

    <script>
        $(document).ready(function() {
            setTimeout(function () { $('.sub blockquote').glow('#FFFFDD', 800); }, 100);
        });
    </script>
</div>

您需要参考

<script src="~/Scripts/jquery.glow.js"></script>