更多控制技能：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>
