欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3实现动画

程序员文章站 2022-03-18 18:09:20
...

CSS3实现一个简单的动画

可以改变任意多的样式任意多的次数,用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成,为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:
HTML代码:

<div>
<span class="span" id="span1" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
&gt;</span>
<span id="span2" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
&lt;</span>
<span id="span3" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
&and;</span>
<span id="span4" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
&or;</span>
</div>    

CSS3代码:

<style> 
.span{
position:relative;
animation-duration:2s;          /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
animation-timing-function:linear;   /*规定动画的速度曲线。默认是 "ease"*/
animation-delay:0;              /*规定动画何时开始。默认是 0。*/
animation-iteration-count:infinite; /*规定动画被播放的次数。默认是 1。*/
animation-direction:alternate;             /* 规定动画是否在下一周期逆向地播放。默认是 "normal"*/
animation-play-state:running;       /*规定动画是否正在运行或暂停。默认是 "running"。*/
/* Safari and Chrome: */
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
#span1
{
top:100px;
left:300px;
color:#009999;
position:relative;
animation-name:myfirst1;
/* Safari and Chrome: */
-webkit-animation-name:myfirst1;
}

@keyframes myfirst1
{
from   {color:#009999 ; left:300px; top:100px;}
to  {color:#ffffff; left:320px; top:100px;}
}

@-webkit-keyframes myfirst1 /* Safari and Chrome */
{
from {color:#009999 ; left:300px; top:100px;}
to  {color:#ffffff; left:320px; top:100px;}
}
#span2
{
top:100px;
left:120px;
color:#009999;
position:relative;
animation-name:myfirst2;
/* Safari and Chrome: */
-webkit-animation-name:myfirst2;
}
@keyframes myfirst2
{
from   {color:#009999 ; left:120px; top:100px;}
to  {color:#ffffff; left:100px; top:100px;}
}
@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
from {color:#009999 ; left:100px; top:100px;}
to  {color:#ffffff; left:80px; top:100px;}
}
#span3
{
top:50px;
left:100px;
color:#009999;
position:relative;
animation-name:myfirst3;
/* Safari and Chrome: */
-webkit-animation-name:myfirst3;
}
@keyframes myfirst3
{
from   {color:#009999 ; left:100px; top:50px;}
to  {color:#ffffff; left:100px; top:30px;}
}
@-webkit-keyframes myfirst3 /* Safari and Chrome */
{
from {color:#009999 ; left:90px; top:50px;}
to  {color:#ffffff; left:90px; top:50px;}
}
#span4
{
top:150px;
left:0px;
color:#009999;
position:relative;
animation-name:myfirst4;
/* Safari and Chrome: */
-webkit-animation-name:myfirst4;
}
@keyframes myfirst4
{
from   {color:#009999 ; left:0px; top:150px;}
to  {color:#ffffff; left:0px; top:170px;}
}
@-webkit-keyframes myfirst4 /* Safari and Chrome */
{
from {color:#009999 ; left:130px; top:150px;}
to  {color:#ffffff; left:130px; top:170px;}
}
</style>

实现的效果就是从上下左右各个方向的动态箭头,一般用于提醒用户可以向下或者向上拖动。