-3

如何使用 CSS3 使我的按钮“放射性”并在其周围发光？

4

3 回答 3

2

我真的很急着离开，但做了一个基本的 1，本来会说得很清楚，但正如我所说的迟到了，但你可以在这里查看演示......希望你喜欢它。

演示

HTML

<input type="button" class="container glow" value="Hello" />

CSS

.container{
    animation:glow 7s;
    -moz-animation:glow 7s; /* Firefox */
    -webkit-animation:glow 7s; /* Safari and Chrome */
    -o-animation:demo 7s; /* Opera */
    animation:glow 7s infinite;
    margin: 30px;
}

@keyframes glow {
    0% {-moz-box-shadow: 0 0 0 0 #B2FF54;
    -webkit-box-shadow: 0 0 5px 5px#B2FF54;
    box-shadow: 0 0 0 0 #B2FF54;}
    50% {-moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#B2FF54;
    box-shadow: 0 0 5px 5px #B2FF54;}
    100% {-moz-box-shadow: 0 0 0 0 #B2FF54;
    -webkit-box-shadow: 0 0 0 0px#B2FF54;
    box-shadow: 0 0 0 0 #B2FF54;}
}

@-moz-keyframes glow /* Firefox */ {
    0% {-moz-box-shadow: 0 0 0 0 #B2FF54;
    -webkit-box-shadow: 0 0 5px 5px#B2FF54;
    box-shadow: 0 0 0 0 #B2FF54;}
    50% {-moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#B2FF54;
    box-shadow: 0 0 5px 5px #B2FF54;}
    100% {-moz-box-shadow: 0 0 0 0 #B2FF54;
    -webkit-box-shadow: 0 0 0 0px#B2FF54;
    box-shadow: 0 0 0 0 #B2FF54;}
}

@-webkit-keyframes glow /* Safari and Chrome */ {
    0% {-moz-box-shadow: 0 0 0 0 #B2FF54;
    -webkit-box-shadow: 0 0 5px 5px#B2FF54;
    box-shadow: 0 0 0 0 #B2FF54;}
    50% {-moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#B2FF54;
    box-shadow: 0 0 5px 5px #B2FF54;}
    100% {-moz-box-shadow: 0 0 0 0 #B2FF54;
    -webkit-box-shadow: 0 0 0 0px#B2FF54;
    box-shadow: 0 0 0 0 #B2FF54;}
}

@-o-keyframes glow /* Opera */ {
    0% {-moz-box-shadow: 0 0 0 0 #B2FF54;
    -webkit-box-shadow: 0 0 5px 5px#B2FF54;
    box-shadow: 0 0 0 0 #B2FF54;}
    50% {-moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#B2FF54;
    box-shadow: 0 0 5px 5px #B2FF54;}
    100% {-moz-box-shadow: 0 0 0 0 #B2FF54;
    -webkit-box-shadow: 0 0 0 0px#B2FF54;
    box-shadow: 0 0 0 0 #B2FF54;}
}
于 2012-12-21T06:53:23.493 回答
1

请确保您在此处发布之前使用 Google。（尝试 CSS3 按钮发光）
我的第一个结果是：http ://www.zurb.com/playground/radioactive-buttons

于 2012-12-21T06:35:56.397 回答
0

使用 box-shadow 属性：

-webkit-box-shadow:5px 5px 5px #123456; 
-moz-box-shadow: 5px 5px 5px #123456; 
box-shadow:5px 5px 5px #123456;
于 2012-12-21T06:32:53.580 回答