html5网站常用动画样式,css3实现
<!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>css3页面动画</title> <style> html,body,.maibody{ width: 100%; height: 100%; position: relative; overflow: hidden; background:#dcdcdc; color: #ffffff; text-align: center; line-height: 200px; } .float1{ width: 200px; height: 200px; background: orange; animation:upquick 1s; position: absolute; left: 30%; top:100px; } @keyframes upquick { 0% {top: 1000px;} 100% {top:100px; } } .float2{ width: 800px; height: 200px; position: absolute; right: 0; bottom: 0; background: green; animation:upslow 3s; } @keyframes upslow { 0% {bottom: -250px;} 100% {bottom: 0;} } .float3{ width: 200px; position: absolute; height: 200px; bottom: 0; background: blue; animation:rightmid 2s; } @keyframes rightmid { 0% {left: -250px;} 100% {left: 0;} } </style> </head> <body> <div class="maibody"> <div class="float1">快速向上</div> <div class="float2">慢速向上</div> <div class="float3">中速向右</div> </div> </body> </html>