HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3动画</title> <link type="text/css" rel="stylesheet" href="animation.css" /> </head> <body> <div class="rotate">rotate</div> <div class="scale">scale</div> <div class="translate">translate</div> <div class="skew">skew</div> <div class="origin">origin</div> <div class="single">single property</div> <div class="whole">whole property</div> <div class="resume">change & resume</div> <div class="animation">animation</div> </body> </html>CSS代码：
animation.css
div { width: 80px; height: 30px; line-height: 30px; text-align: center; background: #06F; color: #fff; font-family: Arial, Helvetica, sans-serif; -webkit-border-radius: 10px; margin: 5px; } .rotate { -webkit-transform: rotate(0deg); } .rotate:hover { -webkit-transform: rotate(90deg); } .scale { -webkit-transform: scale(1); } .scale:hover { -webkit-transform: scale(1.5); } .translate { -webkit-transform: translate(0px, 0px); } .translate:hover { -webkit-transform: translate(50px, 50px); } .skew { -webkit-transform: skew(0); } .skew:hover { -webkit-transform: skewY(20deg); } .origin { -webkit-transform-origin: top left; -webkit-transform: rotate(0); } .origin:hover { -webkit-transform: rotate(45deg); } .single { width: 150px; } .single:hover { background: #f00; width: 200px; height: 100px; line-height: 100px; -webkit-transition-property: background; -webkit-transition-duration: 2s; } .whole { width: 150px; } .whole:hover { width: 200px; height: 100px; line-height: 100px; background: #f00; -webkit-transition-duration: 2s; } .resume { width: 150px; -webkit-transition-duration: 2s; } .resume:hover { width: 200px; height: 100px; line-height: 100px; background: #f00; -webkit-transition-duration: 2s; } .animation:hover { -webkit-animation-name: anim; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes anim { 0% { width: 80px; height: 30px; line-height: 30px; background: #06F; } 50% { width: 140px; height: 65px; line-height: 65px; background: #360; } 100% { width: 200px; height: 100px; line-height: 100px; background: #f00; } }
版权声明：本文为博主原创文章，未经博主允许不得转载。
相关文章
精彩导读
热门资讯
关注我们
