Question

这是我fiddle的视觉理解，它有点乱，但它在我身边起作用。当您单击该框时，它将切换一个内部有圆圈的DIV。我希望那个圆圈像灯光一样闪烁。其他盒子将显示绿色，黄色和红色的不同颜色。颜色对应于其状态，例如登录，在线和离线。我通过查看他们的状态来制作这些圈子的方式是使用PHP。我正在使用一个名为$ circle of 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的.click（），你可以使用JQuery's ajax，就像官方的例子所示：

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

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

1 个答案: