css链接像Playstation 4用户界面一样悬停

Question

当链接像带有css的Playstation 4用户界面（见下面的链接）一样悬停时，有没有办法创造一种移动的发光效果（正如你在视频链接上看到的那样，当有东西悬停时，发光会向上向下，从密集变为不密集）？

第0:26分钟对以下视频链接的影响示例-->

https://www.youtube.com/watch?v=EkRIUxGFsSU

我可以想象这是用css边框辉光使用边框半径，框阴影和边框属性完成的。但是，我怎样才能像视频链接一样做出发光的动作呢？。下面是我在css发光边框上发现的一个例子：

    .glowing-border {
        border: 2px solid #dadada;
        border-radius: 7px;
    }
    .glowing-border:focus { 
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0 0 10px #9ecaed;
    }

现场演示：http://jsfiddle.net/simevidas/CXUpm/1/show/单击类型字段以查看辉光。

Answer 1

您可以使用CSS3 transition来完成此操作。举个例子：

input {
    float:right;
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin-top:-10px;    
    transition: box-shadow 1s;
    box-shadow:0 0 0 #FF0000;
}
input:focus { 
    outline: 0 none;
    box-shadow:0 0 10px #FF0000;
}

这会将长方体阴影样式更改为焦点，持续时间为1秒。

JSFiddle更新