7

在使用我的页面时，我需要将用户的注意力吸引到某个按钮上。

<button id="btnSubmit" style="float:left;width:78px;">Submit</button>

理想情况下，我希望按钮“发光”。即在它周围有一个淡入的边框，然后在一秒钟后淡出。

我尝试使用 box-shadow 来实现我想要的发光效果。

.boxShadowed{
     font-weight:bold;
    -moz-box-shadow:0px 0px 10px 7px #777777;
    -webkit-box-shadow:0px 0px 10px 7px #777777;
    box-shadow:0px 0px 10px 7px #777777;
}

但我不知道如何让它淡入淡出。此外，它似乎在 IE8 中不起作用。

我知道 jQuery 通常非常适合这些效果，但到目前为止我还没有遇到任何合适的。

4

3 回答 3

7

DEMO - 使用 CSS3 盒子阴影和动画的外发光（使用-moz和-webkit供应商前缀）。

于 2012-09-24T15:32:02.330 回答
7 
$('button').effect( "highlight", {color: 'red'}, 3000 );

演示。

于 2012-09-24T15:12:33.800 回答
0

在线性转换的 500 毫秒内，将向按钮添加一个类highlightButton （添加样式）。以同样的方式，该类将再次被删除。

一定要包括 jQuery 和 jQueryUI

关于 addClass 和 removeClass 的更多信息可以在这里找到：
https ://api.jquery.com/addclass/
https://api.jquery.com/removeclass/

Javascript：

$("#btnTest").addClass( "highlightButton", 500, "linear" ).removeClass("highlightButton",500,"linear");

CSS：

.highlightButton {
  border-color: red;
  color: red;
  font-weight: bold;
}

HTML：

<button type="button" class="btn btn-default" id="btnTest">test</button>

Fiddle上的现场演示

于 2018-06-22T15:44:38.837 回答