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's ajax 而不是 JQuery 的 .click() ，就像官方示例所示:

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