CSS链接徘徊喜欢的Playstation 4用户界面

-1

有没有一种方法来创建一个发光效果的移动（你可以将视频链接上看到，当一些正在徘徊辉光上升面朝下，从密集变得较不密集）当链接像Playstation 4用户界面（请参阅下面的链接）悬停与CSS？下面的视频链接上分0:26效果CSS链接徘徊喜欢的Playstation 4用户界面

示例 - >

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/ 单击类型字段看到了光芒。

来源

2016-07-22 user5434403

你可以做，使用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

来源

2016-07-22 08:22:51 Dygestor

那不正是我要去的，但感谢你的努力。我试图让边界焕发来来去去，例如左边框从底部到顶部。我猜我尝试做也许是有点复杂，它可能会与SVG动画 – user5434403

工作来来去去的效果可以通过CSS动画来实现，但更复杂的影响是不完全的CSS友好的。也许你可以让左边境从底部到通过动画的背景图像上，但我认为，如果你与SVG去会更容易些。 – Dygestor

非常感谢您的回答，我会尝试用SVG – user5434403

CSS链接徘徊喜欢的Playstation 4用户界面

回答

相关问题