首页 > 代码库 > Animation效果
Animation效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Animation</title> <!-- <link href="http://www.mamicode.com/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.mamicode.com/iepngfix.js"></script> --> <style type="text/css"> /***************************/ div{ font-weight:bold; float: left; margin-left: 5px; background: #eeeeee; } .div1{ width: 100px; height: 100px; } .div1:hover{ border-radius: 0px; -webkit-animation: 1s rainbow forwards; /*注意必须要使用-webkit-animation，不能用animation*/ } @-webkit-keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } } /******************************************/ .div2{ width: 100px; height: 100px; /*-webkit-transform:rotate(10deg);*/ /*-webkit--webkit-transform: scale(0.2);*/ } .div2:hover{ width: 100px; height: 100px; background: red; -webkit-animation: 0.4s pound1 infinite; /*注意必须要使用-webkit-animation，不能用animation*/ } /*scale（规模）这货表示：把当前的div变大1.2倍*/ @-webkit-keyframes pound1 { from { -webkit-transform: none; /*-webkit-transform:rotate(10deg);*/} to { -webkit-transform: scale(2); /*-webkit-transform:rotate(30deg);*/} }
/******************************************/ .div3{ width: 100px; height: 100px; /*-webkit-transform:rotate(10deg);*/ /*-webkit--webkit-transform: scale(0.2);*/ } .div3:hover{ width: 100px; height: 100px; -webkit-animation: 1.5s pound2 infinite; /*注意必须要使用-webkit-animation，不能用animation*/ } @-webkit-keyframes pound2 { from { -webkit-transform: none; /*-webkit-transform:rotate(10deg);*/} 25% { -webkit-transform:rotate(-30deg);} 50% { -webkit-transform:rotate(0deg);} 75%{ -webkit-transform:rotate(30deg);} 100%{ -webkit-transform:rotate(0deg);} }
</style> </head> <body> <div class="div1">1:动态变化颜色</div> <div class="div2">2:心跳的感觉</div> <div class="div3">3:摇头摆尾</div> </body> </html>
Animation效果