最終效果如下：
頁面內容如下：
1 <body>
2
3 <div class="target animatecommon"></div>
4 <div class="radiation animatecommon"></div>
5
6 </body>
7
css如下：
<style type="text/css">
.animatecommon{
animation-timing-function:liner;
animation-iteration-count:infinite;
animation-play-state:running;
animation-direction:normal;
/* Firefox: */
-moz-animation-duration:1s;
-moz-animation-timing-function:liner;
-moz-animation-iteration-count:infinite;
-moz-animation-play-state:running;
-moz-animation-direction:normal;
/* Safari and Chrome: */
-webkit-animation-duration:1s;
-webkit-animation-timing-function:liner;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;
-webkit-animation-direction:normal;
/* Opera: */
-o-animation-duration:1s;
-o-animation-timing-function:liner;
-o-animation-iteration-count:infinite;
-o-animation-play-state:running;
-o-animation-direction:normal;
}
.radiation{
width:50px;
height:50px;
border-radius:50%;
background:red;
position:fixed;
top:50%;
left:50%;
margin-left:-25px;
margin-top:-25px;
z-index: 99;
animation-name:radiation;
/* Firefox: */
-moz-animation-name:radiation;
/* Safari and Chrome: */
-webkit-animation-name:radiation;
/* Opera: */
-o-animation-name:radiation;
}
.target
{
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
border-radius:50%;
background:red;
position:fixed;
top:50%;
left:50%;
z-index: 98;
animation-name:location;
/* Firefox: */
-moz-animation-name:location;
/* Safari and Chrome: */
-webkit-animation-name:location;
/* Opera: */
-o-animation-name:location;
}
@keyframes location
{
0% {transform:scaleX(1)scaleY(1);-webkit-transform:scaleX(1)scaleY(1);-moz-transform:scaleX(1)scaleY(1);-o-transform:scaleX(1)scaleY(1);}
100% {transform:scaleX(3)scaleY(3);-webkit-transform:scaleX(3)scaleY(3);-moz-transform:scaleX(3)scaleY(3);-o-transform:scaleX(3)scaleY(3);filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; }
}
@-moz-keyframes location
{
0% {transform:scaleX(1)scaleY(1);-webkit-transform:scaleX(1)scaleY(1);-moz-transform:scaleX(1)scaleY(1);-o-transform:scaleX(1)scaleY(1);}
100% {transform:scaleX(3)scaleY(3);-webkit-transform:scaleX(3)scaleY(3);-moz-transform:scaleX(3)scaleY(3);-o-transform:scaleX(3)scaleY(3);filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; }
}
@-webkit-keyframes location
{
0% {transform:scaleX(1)scaleY(1);-webkit-transform:scaleX(1)scaleY(1);-moz-transform:scaleX(1)scaleY(1);-o-transform:scaleX(1)scaleY(1);}
100% {transform:scaleX(3)scaleY(3);-webkit-transform:scaleX(3)scaleY(3);-moz-transform:scaleX(3)scaleY(3);-o-transform:scaleX(3)scaleY(3);filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; }
}
@-o-keyframes location
{
0% {transform:scaleX(1)scaleY(1);-webkit-transform:scaleX(1)scaleY(1);-moz-transform:scaleX(1)scaleY(1);-o-transform:scaleX(1)scaleY(1);}
100% {transform:scaleX(3)scaleY(3);-webkit-transform:scaleX(3)scaleY(3);-moz-transform:scaleX(3)scaleY(3);-o-transform:scaleX(3)scaleY(3);filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; }
}
@keyframes radiation
{
0% {transform:scaleX(3)scaleY(3);-webkit-transform:scaleX(3)scaleY(3);-moz-transform:scaleX(3)scaleY(3);-o-transform:scaleX(3)scaleY(3);filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;background: white}
100% {transform:scaleX(1)scaleY(1);-webkit-transform:scaleX(1)scaleY(1);-moz-transform:scaleX(1)scaleY(1);-o-transform:scaleX(1)scaleY(1);filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;background: red}
}
@-moz-keyframes radiation
{
0% {transform:scaleX(3)scaleY(3);-webkit-transform:scaleX(3)scaleY(3);-moz-transform:scaleX(3)scaleY(3);-o-transform:scaleX(3)scaleY(3);filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;background: white}
100% {transform:scaleX(1)scaleY(1);-webkit-transform:scaleX(1)scaleY(1);-moz-transform:scaleX(1)scaleY(1);-o-transform:scaleX(1)scaleY(1);filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;background: red}
}
@-webkit-keyframes radiation
{
0% {transform:scaleX(3)scaleY(3);-webkit-transform:scaleX(3)scaleY(3);-moz-transform:scaleX(3)scaleY(3);-o-transform:scaleX(3)scaleY(3);filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;background: white}
100% {transform:scaleX(1)scaleY(1);-webkit-transform:scaleX(1)scaleY(1);-moz-transform:scaleX(1)scaleY(1);-o-transform:scaleX(1)scaleY(1);filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;background: red}
}
@-o-keyframes radiation
{
0% {transform:scaleX(3)scaleY(3);-webkit-transform:scaleX(3)scaleY(3);-moz-transform:scaleX(3)scaleY(3);-o-transform:scaleX(3)scaleY(3);filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;background: white}
100% {transform:scaleX(1)scaleY(1);-webkit-transform:scaleX(1)scaleY(1);-moz-transform:scaleX(1)scaleY(1);-o-transform:scaleX(1)scaleY(1);filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;background: red}
}
</style>