如何在 jQuery 和 SASS 中制作一个轻轻闪烁的按钮？

Posted 2023-03-07

【中文标题】如何在 jQuery 和 SASS 中制作一个轻轻闪烁的按钮？

【英文标题】：How to make a gently flashing button in jQuery and SASS?

【发布时间】：2013-11-02 01:49:09

【问题描述】：

在我的 Rails 应用程序中，有时我必须让某些按钮闪烁/跳动。

这些按钮的颜色各不相同。有些是红色的，有些是绿色的，还有一些是蓝色的。

这是我的 jQuery：

setInterval(function()
  $('a.flashing').toggleClass('blink');
, 1000);

这是我的 CSS（实际上是 SASS）：

.blink 
  background-color: red;

这行得通。

但是，我不希望所有按钮都以红色闪烁。

相反，为了使这种效果对眼睛更柔和一些，每个按钮都应该以比其原始颜色稍暗的阴影闪烁（您知道，这可能会有所不同）。

如何使用尽可能少的代码并且最好完全不使用 jQuery 插件来实现这一点？

感谢您的帮助。

【问题讨论】：

因为不能改变颜色，因为这会影响不同类型的按钮，为什么不影响亮度（或饱和度）？ developer.mozilla.org/en-US/docs/Web/CSS/filter，不幸的是仅适用于 CSS3 .blink filter: brightness(1.2)

谢谢！这实际上是我最终做的事情：filter: brightness(1.1)。像魅力一样工作。

【参考方案1】：

这是一个创建脉动效果的 SASS（+ Compass）功能。可以通过 $count 指定脉动数。

=keyframes($name)
  @-webkit-keyframes #$name
    @content

  @-moz-keyframes #$name
    @content

  @-ms-keyframes #$name
    @content

  @keyframes #$name
    @content

=animation-name($name)
  -webkit-animation-name: $name
  -moz-animation-name: $name
  -o-animation-name: $name
  animation-name: $name

=animation-duration($duration)
  -webkit-animation-duration: $duration
  -moz-animation-duration: $duration
  -o-animation-duration: $duration
  animation-duration: $duration

=animation-timing-function($timing-function)
  -webkit-animation-timing-function: $timing-function
  -moz-animation-timing-function: $timing-function
  -o-animation-timing-function: $timing-function
  animation-timing-function: $timing-function

=animation-iteration-count($iteration-count)
  -webkit-animation-iteration-count: $iteration-count
  -moz-animation-iteration-count: $iteration-count
  -o-animation-iteration-count: $iteration-count
  animation-iteration-count: $iteration-count

=animation-direction($direction)
  -webkit-animation-direction: $direction
  -moz-animation-direction: $direction
  -o-animation-direction: $direction
  animation-direction: $direction

// define keyframes
+keyframes(change_background_color)
  to
    background-color: $some_color

// define the mixin
=pulsate($time:0.2s, $count:8)
  +animation-name(change_background_color)
  +animation-duration($time)
  +animation-iteration-count($count)
  +animation-direction(alternate)
  +animation-timing-function(ease-in-out)

// use the mixin in a class
.pulsate-8times
  +pulsate(1s, 16)

不需要 JS（切换类除外）。将 $count 设置为 'infinite' 以获得无尽的脉动。

JSFiddle 与编译后的 CSS：http://jsfiddle.net/3L2yA/

更新：在 SCSS 中相同（感谢 http://sasstoscss.com/ ;-)：

@mixin keyframes($name) 
    @-webkit-keyframes #$name 
        @content;
    

    @-moz-keyframes #$name 
        @content;
    

    @-ms-keyframes #$name 
        @content;
    

    @keyframes #$name 
        @content;
    


@mixin animation-name($name) 
  -webkit-animation-name: $name;
     -moz-animation-name: $name;
       -o-animation-name: $name;
          animation-name: $name;


@mixin animation-duration($duration) 
  -webkit-animation-duration: $duration;
     -moz-animation-duration: $duration;
       -o-animation-duration: $duration;
          animation-duration: $duration;


@mixin animation-timing-function($timing-function) 
  -webkit-animation-timing-function: $timing-function;
     -moz-animation-timing-function: $timing-function;
       -o-animation-timing-function: $timing-function;
          animation-timing-function: $timing-function;


@mixin animation-iteration-count($iteration-count) 
  -webkit-animation-iteration-count: $iteration-count;
     -moz-animation-iteration-count: $iteration-count;
       -o-animation-iteration-count: $iteration-count;
          animation-iteration-count: $iteration-count;


@mixin animation-direction($direction) 
  -webkit-animation-direction: $direction;
     -moz-animation-direction: $direction;
       -o-animation-direction: $direction;
          animation-direction: $direction;


@include keyframes(change_background_color) 
  to 
    background-color: $some_color;
  


@mixin pulsate($time: 0.2s, $count: 8) 
  @include animation-name(change_background_color);
  @include animation-duration($time);
  @include animation-iteration-count($count);
  @include animation-direction(alternate);
  @include animation-timing-function(ease-in-out);


.pulsate-8times 
  @include pulsate(1s, 16);

【讨论】：

谢谢！我现在正在尝试将其转换为我的语法（实际上是 scss 而不是 sass）。

好的，谢谢。这行得通。即使我最终得到了eithed's 解决方案（因为它非常简单），我会将您的答案标记为正确的答案，因为我从中学到了很多东西。

【参考方案2】：

尝试添加一个 CSS3 过渡效果，然后你就不需要跳过和 JS 箍。 .normal 是默认颜色。

 .normal 
      background-color:rgba(250,20,10,1);
      transition: all .5s ease;
    

.blink 
      background-color:rgba(250,20,10,.2);
      transition: all .5s ease;
    

【讨论】：

谢谢，但老实说，我无法让它工作。事实上，我整天都在玩 keyframes 等，并在某个时候放弃了，因为我无法让它在我的应用程序中处理大量不同的颜色。

【参考方案3】：

尝试使用 jQuery 为背景颜色设置动画

HTML：

<div id="div1" class="normal" >some text</div>

JavaScript

setTimeout(function()
    $("#div1").animate(backgroundColor: '#dd6666', 500);
, 1000);

demo

【讨论】：

谢谢，但这不适合我，因为颜色值是硬编码的，我需要它更灵活。