減少累積獎金游戲中文字的眨眼速度

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">