减少累积奖金游戏中文字的眨眼速度

Question

我想提出一个大奖游戏很相似，选择这一项

我完全不知道从哪里开始。 我的第一个想法是使用从服务器端发送的一组随机选择的数字，以避免使用jquery或css欺骗和设置动画。

然后我考虑只使用jquery，因为我更了解它，并且让眨眼间隔是一种递归函数，它返回我想要的放松速度的值。 （该值几乎与视频中的值完全相同，不超过3-4秒）。

$('.blink').blink(); // default is 500ms blink interval.
$('.blink').blink(100); // causes a 100ms blink interval.

但是现在我对于从哪里开始感到迷茫，因为这必须是移动友好的。 你会怎么做？

---

更新

$( document ).ready(function() {

var time = 0;
var diff = 50;
var minTime = 0;
var maxTime = 7000;


function easeInOutExpo(t, b, c, d) {
    t /= d;
    return c*t*t*t + b;
};


$("#clickme").click(function() {
    for (var i = 0, len = diff; i <= len; i++) {
      (function(s) {
        setTimeout(function() {
            $('#book').html("Page " + s + " turned");
        }, time);
      })(i); //<--------------i have no clue what this does------------
      time = easeInOutExpo(i, minTime, maxTime, diff);
    }
});

});//document ready

我已经掌握了基本的技巧，但是当您第二次单击它而不是50时，它变为0。这不是一个好行为，因为我将使用这些数字来遍历随机生成的数组。

谁能解释这种行为？ 我在这里包括了一个JS小提琴。 谢谢！

Answer 1

您可以使用简单的CSS动画。

 @keyframes blink { 0% { background-color:red; } 10% { background-color:purple; } 20% { background-color:gray; } 30% { background-color:green; } 40% { background-color:white; } 50% { background-color:cyan; } 65% { background-color:yellow; } 100% { background-color:black } } .Blink{ animation: blink 2s 1 ease-out; background-color:black; height:100px; width:100px; } 

 <div class="Blink">