CSS3 animation 动画效果
使用CSS3 的animation属性做动态效果,减少JS代码的开发,例子如下:
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; /* 使用myfirst效果,持续时间是5秒,按照infinite(匀速)渐变 */ animation:myfirst 5s infinite; /* 检索或设置对象动画在循环中反向运动 */ animation-direction:alternate; /* Safari and Chrome */ -webkit-animation:myfirst 5s infinite; -webkit-animation-direction:alternate; } /** 定义了一个效果名称,分成了5步,每步都标明了不同的状态 */ @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。</p> <div></div> </body> </html>
相关推荐
vavid 2020-04-20
aSuncat 2020-03-01
CaiKanXP 2020-01-12
lanzhusiyu 2020-01-05
我就是停不下来 2014-01-16
sorryericsson 2014-01-16
somboy 2019-11-06
jiedinghui 2019-10-28
沈宫新 2020-06-11
冰蝶 2020-04-20
ShylaDong 2020-02-25
csdnuuu 2020-02-14
wangjie 2020-02-12
wangqing 2019-12-28
zengni 2019-12-25
waterv 2019-12-10