[转]简单的动画效果

来自：http://www.xinshuru.com/
更多控制技能：https://www.cnblogs.com/yangrenmu/p/7085815.html
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>叶子飘落</title>

<style type="text/css">
    html,body{ width: 100%; height: 100%; overflow: hidden;}
    body{ margin: 0; padding: 0; font-family:'microsoft yahei';}

    .stage{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
    .stage .elem{ position: absolute; left: 50%; top: 50%;}
    .stage .scene{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
    .stage .anim{ width: 100%; height: 100%; position: absolute; left: 0; top: 0}

    .s1 .elem{ background-image: url(page.png); background-repeat: no-repeat;}

    .s1 .text{ width: 498px; height: 94px; background-position: 0 0; margin: 3px 0 0 -49px;}
    .s1 .elem.leaves-big{ width: 239px; height: 150px; background-position: 0 0; margin:-25px 0 0 -350px;}
    .s1 .elem.leaves-small{ width: 90px; height: 65px; background-position: 0 -150px; margin:-50px 0 0 -470px;
        -webkit-animation: drop 6s linear infinite;
        -moz-animation: drop 6s linear infinite;
        animation: drop 6s linear infinite;
    }

    @-webkit-keyframes drop{
        0%{ -webkit-transform: rotateZ(-10deg) translateX(0) translateY(-250px); opacity: 0 }
        30%{ -webkit-transform: rotateZ(10deg) translateX(150px) translateY(-50px); opacity: 1 }
        60% { -webkit-transform: rotateZ(30deg) translateX(300px) translateY(150px); opacity: 0}
        100% { -webkit-transform: rotateZ(30deg) translateX(300px) translateY(150px); opacity: 0}
    }
</style>
 

 </head>
 <body>
    <div class="stage">
        <div class="scene s1">
            <div class="anim" style="">
                <div class="text" style="transform: translateY(0px);"></div>
                <div class="elem leaves-big"></div>
                <div class="elem leaves-small"></div>
            </div>
        </div>
    </div>
 </body>
</html>
posted on 2020-09-01 23:58 z5337 阅读(120) 评论(0) 编辑收藏举报