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>

　　

posted @ 2013-12-08 11:57  画零落香  阅读(370)  评论(0)    收藏  举报