如何制作一个闪烁的圆圈？

Question

这是我的fiddle 用于视觉理解，它有点乱，但它对我有用。当您单击该框时，它将切换一个带有圆圈的 DIV。我希望那个圆圈像灯一样闪烁。其他框将显示为绿色、黄色和红色的不同颜色。颜色对应于他们的状态，例如登录、在线和离线。我制作这些圈子的方式是通过查看它们的状态来使用 PHP。我正在使用一个名为 $circle 的 canvas 类型的变量，因为我不知道该怎么做。下面是我的代码，我只展示了“圆圈”的一部分。

如果动画无法工作，我使用的是 Internet Explorer 9.08。

提前致谢！

PHP：

    $class  = ""; //class variable to empty string, the IF statements are below it
                $state  = ""; //state variable to empty string

                //ONLINE
                //if ping succeeds but no user is found
                if( ($user == null) && ($online == 1) ){
                    $user   = "No User";
                    $class  = "online";
                    $state  = "Online";
                }

                //LOGGED IN 
                //ping succeeds and a user is found
                elseif( ($user != null) && ($online == 1) ){
                    //user will be the value from $row['username']
                    $class = "loggedin";
                    $state = "Logged In";
                }

                //OFFLINE
                //if No ping make user and class name show offline
                else{
                    $user  = "No User";
                    $class = "offline";
                    $state = "Offline";
                }
                    //display DIV with the content inside
                echo '<div class="station_info_ ' . $class . '" id="station_info_' . $id . ' circle" rel="' . $class . '" style="left:' . $x_pos . 'px;top:' . $y_pos . 'px;"><p>User:' . $user .'<br>Station:' . $hostname . '<br>Pod:' . $sta_num . '<br>Section:' . $sec_name . '<br>State:' . $state .'<br></p></div>' . "\n";

Answer 1

一个基本的 CSS 让你的圆圈脉动（随意减少毫秒，但我建议不要让它闪烁，它在视觉上有点难看 IMO）将是：

#circle{
height:2rem;
width:2rem;

border-radius: 4rem;

opacity: 0.0;

-webkit-animation: pulsate 1000ms ease-out;
-webkit-animation-iteration-count: infinite; 

-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

@-webkit-keyframes pulsate {
0% {opacity: 0.1;}
40% {opacity: 1.0;}
60% {opacity: 1.0;}
100% {opacity: 0.1;}
}

这是一个JSFiddle：http://jsfiddle.net/bonatoc/7b0a45hq/27/

现在你需要把你的 REST 逻辑（基本上是你已经拥有的 PHP 代码，但最好使用一个返回类名的函数（命名与 CSS 相同），你可以将它与 addClass 一起使用/removeClass 如小提琴所示）。

您可以使用JQuery's ajax，而不是 JQuery 的 .click()，就像官方示例所示：

$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});