基本信息
源码名称：html5制作网页动画场景 例子下载
源码大小：0.28M
文件格式：.rar
开发语言：CSS
更新时间：2016-01-22
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

代码简练，兼容各种主流浏览器 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>html5白天到黑夜动画</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Day and Night: Creating a Scenery Animation with jQuery and CSS" />
        <meta name="keywords" content="jquery, css, animation, scenery, tutorial" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>       
    </head>
    <body>
        <div id="sky"></div>
        <div id="sun_yellow"></div>
        <div id="sun_red"></div>
        <div id="clouds"></div>
        <div id="ground"></div>
        <div id="night"></div>
        <div id="stars"></div>        
        <div id="sstar"></div>
        <div id="moon"></div>
        <div id="title"></div>
        <div>
            <a id="back" href="http://www.tympanus.net/codrops/2009/12/14/day-and-night-creating-animation-with-jquery-and-css/"></a>
        </div>
        <script type="text/javascript" src="jquery-1.3.2.js"></script>
        <script type="text/javascript" src="jquery.color.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#sun_yellow').animate({'top':'96%','opacity':0.4}, 12000,function(){
                    $('#stars').animate({'opacity':1}, 5000,function(){
                        $('#moon').animate({'top':'30%','opacity':1}, 5000, function(){
                            $('#sstar').animate({'opacity':1}, 300);
                            $('#sstar').animate({
                                'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
                            }, 500,function(){
                                $('#title').animate({'opacity':1}, 1000);
                                $('#back').animate({'opacity':1}, 3000);
                            });
                        });
                    });
                });
                $('#sun_red').animate({'top':'96%','opacity':0.8}, 12000);
                $('#sky').animate({'backgroundColor':'#4F0030'}, 18000);
                $('#clouds').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
                $('#night').animate({'opacity':0.8}, 20000);
            });
        </script>
    </body>
</html>