BlogJava-业精于勤荒于嬉，行成于思毁于随-随笔分类-Css相关案例积累http://www.blogjava.net/produ/category/55038.html<h2>见证学习的轨迹，记录闪光的想法</h2>zh-cnWed, 18 May 2016 07:59:28 GMTWed, 18 May 2016 07:59:28 GMT60Css3实现一个坐标闪烁效果http://www.blogjava.net/produ/archive/2015/11/20/430573.html都较瘦都较瘦Fri, 20 Nov 2015 07:54:00 GMThttp://www.blogjava.net/produ/archive/2015/11/20/430573.htmlhttp://www.blogjava.net/produ/comments/430573.htmlhttp://www.blogjava.net/produ/archive/2015/11/20/430573.html#Feedback0http://www.blogjava.net/produ/comments/commentRss/430573.htmlhttp://www.blogjava.net/produ/services/trackbacks/430573.html

页面内容如下：
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>



都较瘦 2015-11-20 15:54 发表评论
]]>