Web代码收录.docVIP

圆的移动 !DOCTYPE html html head script src=js/jquery.js/script style @-webkit-keyframes yuang{ from{left: 0;} to{left: 500px;} } .qq01{width: 90px;height: 90px;border-radius: 50%;background-color: dodgerblue;position: relative;-webkit-animation-name: yuang;-webkit-animation-duration: 3s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-timing-function: linear;} .qq01-1{animation-play-state: paused;} .qq01-2{animation-play-state: running;} /style meta charset=utf-8 / title/title /head body input type=button value=播放 / input type=button value=暂停 / div class=qq01/div script $(input:last).click( function(){ $(.qq01).removeClass(qq01-2) $(.qq01).addClass(qq01-1) } ) $(input:first).click( function(){ $(.qq01).removeClass(qq01-1) $(.qq01).addClass(qq01-2) } ) /script /body /html 盒子的移动 !DOCTYPE html html head style @keyframes yidong{ from{transform:translate(0,0)} to{transform:translate(90px,120px)} } div{width: 90px;height: 90px;background-color: salmon;animation-name:yidong;animation-duration:3s;} /style meta charset=utf-8 / title/title /head body div/div /body /html 盒子的旋转 !DOCTYPE html html head style @-webkit-keyframes yidong{ from{transform:rotate(0)} to{transform:rotate(90deg)} } div{width: 90px;height: 90px;background-color: salmon;-webkit-animation-name:yidong;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;} /style meta charset=utf-8 / title/title /head body div/div /body /html 盒子的缩放 !DOCTYPE html html head style @-webkit-keyframes yidong{ from{transform:scale(1,1)} to{transform:scale(2,2)} } div{width: 90px;height: 90px;background-color: salmon;-webkit-animation-name:yidong;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation