CSS闪耀效果 - 定时-Java 学习之路

我正在处理一个可以激活或停用的按钮 . 当它被激活时，我希望每五秒左右发光一次 . 我一直在看这个小提琴

http://jsfiddle.net/AntonTrollback/nqQc7/

并尝试重新设计它，以便我的按钮周围的div将与类“图标效果”切换，创建闪耀效果，然后在大约一秒后切换，然后它将每五秒钟执行一次 . 我编辑了小提琴来创建div

<div id = 'my_button_div>
<div>

从本质上讲，它给出了制作红色盒子的各种属性 . 然后，我离开了图标效果类，因为fidde有它，并运行了一个时间函数

setInterval(function () {
                $('#my_ button_div').toggleClass('icon-effect');
                setTimeout(function () {
                     $('#my_ button_div').toggleClass('icon-effect');
                }, 1000);
            }, 5000);

这是小提琴

http://jsfiddle.net/nqQc7/286/

但我似乎无法让它发挥作用 . 我把悬停的东西留在那里，但它应该在那些分配的时间触发闪耀效果 .

2 回答

5
您发布的jsFiddle有几个问题：
- 它没有导入jQuery，这意味着 $ 将不会被定义
- 您在实际元素上切换 icon-effect 类，但它应该在子元素上
- 在JavaScript中引用时，实际元素的id中有一个空格
- .icon-effect 子元素与 #my_button_div 元素分开定义（它需要在其中）
这是一个固定的jsFiddle：http://jsfiddle.net/nqQc7/289/
回复于 2024-05-02T06:11:02+08:00

您需要首先解决一些编码错误：

Change this:

<div id = 'my_button_div>
<div>

To this:

<div id="my_button_div"></div>

Change this:

$('#my_ button_div').toggleClass('…');

To this:

$('#my_button_div').toggleClass('…');

现在，为了无缝地使用Gallagher/Coyier example中的样式，您需要将 class="icon" 添加到 <div id="my_button_div"> 并在其中嵌套 <span class="icon-effect"></span> .

Like so:

<div class="icon" id="my_button_div">
    <span class="icon-effect"></span>
</div>

然后，不是使用 :hover 伪类，而是通过jQuery应用一些特殊的"triggered"类 .

So, this:

.icon:hover .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

becomes this:

.icon.triggered .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

And this:

$('#my_ button_div').toggleClass('icon-effect');

Becomes this:

$('#my_ button_div').toggleClass('triggered');

setInterval(function () {
    $('#my_button_div').toggleClass('triggered');
    setTimeout(function () {
        $('#my_button_div').toggleClass('triggered');
    }, 1000);
}, 5000);

/* Icon */

.icon {
  display: block;
  width: 32px;
  height: 32px;
  background: red;
    
  position: relative;
  overflow: hidden;
}

/* "shine" element */
/* Could be a pseudo element but they lack support for CSS transitions in some browsers */

.icon .icon-effect {
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;

  opacity: 0;
  
  background: rgba(255, 255, 255, 0.2);
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background: -webkit-gradient(
    linear, left top, right top,
    color-stop(0%  ,rgba(255, 255, 255, 0.2)),
    color-stop(75% ,rgba(255, 255, 255, 0.2)),
    color-stop(90% ,rgba(255, 255, 255, 0.8)),
    color-stop(100%,rgba(255, 255, 255, 0.0))
  );
  background: -o-linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,6
    rgba(255, 255, 255, 0.0) 100%
  );
  background: linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );

  -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
       -o-transform: rotate(30deg);
          transform: rotate(30deg);
    
  -webkit-transition-property: left, top, opacity;
     -moz-transition-property: left, top, opacity;
      -ms-transition-property: left, top, opacity;
       -o-transition-property: left, top, opacity;
          transition-property: left, top, opacity;
  -webkit-transition-duration: 0.5s, 0.5s, 0.1s;
     -moz-transition-duration: 0.5s, 0.5s, 0.1s;
      -ms-transition-duration: 0.5s, 0.5s, 0.1s;
       -o-transition-duration: 0.5s, 0.5s, 0.1s;
          transition-duration: 0.5s, 0.5s, 0.1s;
  -webkit-transition-timing-function: ease;
     -moz-transition-timing-function: ease;
      -ms-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
}

/* Trigger effect */

.icon.triggered .icon-effect {
  opacity: 1;
  top: -30%;
  left: -30%;
}

/* Active state */

.icon:active .icon-effect {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="icon" id="my_button_div">
    <span class="icon-effect"></span>
</div>

回复于 2024-05-02T06:11:02+08:00

CSS闪耀效果 - 定时

2 回答

相关问题