Question

我如何使用CSS3让我的按钮“放射性”，周围有光芒？

Answer 1

我真的急着要离开，但做了一个基本的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;}
}

Answer 2

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

Answer 3

使用box-shadow属性：

-webkit-box-shadow:5px 5px 5px #123456; 
-moz-box-shadow: 5px 5px 5px #123456; 
box-shadow:5px 5px 5px #123456;

用CSS添加“放射性”按钮的好方法？

3 个答案: