-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 に答える