2

我正在尝试使用 jquery 使用 css box-shadow 创建脉冲效果。我尝试了以下代码，但完全失败了。我想要实现的是带有盒子阴影的平滑脉冲效果

我尝试的代码是html

<div class="one">
</div>

css

.one {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -1px -1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         -1px -1px 5px rgba(50, 50, 50, 0.75);
}
.two {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -1px -1px 13px rgba(50, 50, 50, 0.75);
    box-shadow:         -1px -1px 13px rgba(50, 50, 50, 0.75);
}

jQuery

$("div").setInterval(function() {
   $(this).toggleClass(".two");
}, 1000);

小提琴http://jsfiddle.net/KXp4D/2/

4

6 回答 6

9

纯 CSS 示例JSFIDDLE

@-webkit-keyframes shadow {
    0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
    50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
    100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
@-moz-keyframes shadow {
    0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
    50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
    100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
@keyframes shadow {
    0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
    50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
    100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}

.one {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: red;
    box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
}
.one:hover {
    -webkit-animation: shadow 1s ease-in-out infinite;
    -moz-animation: shadow 1s ease-in-out infinite;
    animation: shadow 1s ease-in-out infinite;
}
于 2013-06-14T11:50:59.943 回答
8

setInterval()不是一个jQuery函数，而是一个简单的JavaScript函数。

要使用它，您需要将代码更改为

setInterval(function() {
   $("div").toggleClass("two");
}, 1000);

这会起作用，但就像开关一样；为了使其平滑，您可以像这样使用 CSS3 过渡：

transition: all 1s ease;

演示

请注意，您不需要必要的 javascript，这可以在纯 CSS3 中完成。

于 2013-06-14T11:50:04.303 回答
0 
setInterval(function() {
   var cl = $("div").hasClass('one') ? 'two' : 'one';
   $("div").attr('class', cl);
}, 1000);

您不能将 setInterval 添加到对象。像这样使用它

setInterval(function(){
  // do stuff
}, 1000);

小提琴

注意：为了平滑过渡，我在 box-shadow 上添加了 CSS 过渡

于 2013-06-14T11:50:23.443 回答
0

在小提琴中，您的setInterval方法运行不正确，并且toggle没有正确的参数。试试这个：

setInterval(function() {
   $("div").toggleClass("one");
   $("div").toggleClass("two");
}, 1000);
于 2013-06-14T11:50:38.243 回答
0

这是工作演示 http://jsfiddle.net/LKXLc/

setInterval(function() {
if( $("div").hasClass("one"))
{
      $("div").removeClass("one").addClass("two");
}
else
{
      $("div").removeClass("two").addClass("one");
}
}, 10);
于 2013-06-14T11:55:41.513 回答
0

你可以用 CSS 做到这一点

演示

HTML 标记

<a href="#" id="msElem">Click Here</a>

CSS

@keyframes msPulseEffect {
   0% {
     box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
   }
 100% {
     box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
   }
 }
 #msElem{
   margin: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100px;
   height: 100px;
   color:white;
   background-color: #0078D7;
   border-radius: 50%;
   text-decoration: none;
   animation: msPulseEffect 1s infinite;
 }
于 2019-03-20T16:03:12.250 回答