javascript - 如何制作闪烁的圆圈？

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(随意减少毫秒，但我建议不要让它闪烁，在我看来它在视觉上有点难看)是:

#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 如 fiddle 所示)。

代替 JQuery 的 .click()，您可以使用 JQuery's ajax ，就像官方示例所示:

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