在我的 Rails 应用程序中，有时我必须让某些按钮闪烁/跳动。
这些按钮的颜色各不相同。有些是红色的，有些是绿色的，还有一些是蓝色的。
这是我的 jQuery：
setInterval(function(){
$('a.flashing').toggleClass('blink');
}, 1000);
这是我的 CSS（实际上是 SASS）：
.blink {
background-color: red;
}
这行得通。
但是，我不希望所有按钮都以红色闪烁。
相反，为了使这种效果对眼睛更温和一些，每个按钮都应该以其原始颜色稍深的阴影闪烁（您知道可能会有所不同）。
如何使用尽可能少的代码并且最好完全没有 jQuery 插件来实现这一点？
谢谢你的帮助。
这是一个创建脉动效果的 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);
}
试试加个 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;
}
尝试使用 jQuery 为背景颜色设置动画
HTML：
<div id="div1" class="normal" >some text</div>
JavaScript
setTimeout(function(){
$("#div1").animate({backgroundColor: '#dd6666'}, 500);
}, 1000);