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

Question

当链接像 Playstation 4 用户一样悬停时，有没有一种方法可以创建移动的发光效果(正如您在视频链接上看到的那样，当某些东西悬停时，发光会上下颠倒，从强烈变为不那么强烈)与 css 的界面(见下面的链接)？

下面视频链接中第 0:26 分钟的效果示例 -->

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

我可以想象这是通过使用边框半径、框阴影和边框属性的 css 边框发光来完成的。但是我怎样才能像视频链接那样做出发光的 Action 呢？这是我在 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 update