jQuery白天到夜间渐变动画

使用方法

引入样式表和JS文件

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>

HTML主体代码

<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>

JS代码

<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>
更新时间 2020-06-29 21:26:19,本资源已通过Awesomes审核检验,请放心使用!
如下载遇到问题,请联系客服解决
下载地址
此插件下载需要1A币,请登录后进行下载。
请文明评论,与人为善,比聪明更重要!
评论