css3 动态风景,昼夜不停:用jQuery和jQuery创建风景动画

在今天的教程中，我将向您展示，如何用几行jQuery和一些带有图像的绝对定位元素来创建一个令人惊叹的动画场景。

请参见下面的演示链接并查看结果。动画大约需要30秒，所以请坐好，享受它!

请注意，这不会在任何IE版本中工作。不是因为不可能，我只是没有时间和精力。我试着修复它至少在ie8上，但你知道，当编码开始变得丑陋的时候，因为“修理”IE，我有时会失去耐心。今天是有一天(我敢打赌,你们都有),你说:达尔文,易经…即已死(不仅IE6),不,整个线!

好的，让我们从编码开始。

1、HTML

HTML包含了将风景作为背景图像的div。所以，我们将拥有天空、太阳、云彩、风景、月亮和星星。我们也会有一个夜晚的元素和流星:

落日的颜色变化是由另一个红色太阳的消失来模拟的，而黄色的太阳逐渐消失。

在进入动画细节之前，我们先来看一下CSS。

2、CSS

CSS非常类似于所有的元素，因为它们中的大多数将被拉伸到屏幕上。他们都有绝对的定位:

body{

overflow:hidden;

}

#clouds, #sky, #night, #stars{

position:absolute;

top:0px;

left:0px;

right:0px;

bottom:0px;

width:100%;

}

在拥有公共属性时，我们可以为所有的类指定它们，用逗号分隔。

#sky{

background:#fff url(../images/sky.png) repeat-x top left;

z-index:1;

}

天空由半透明的图像组成，由蓝色到白色的渐变。这将对天空产生良好的效果。

#sun_yellow{

left:45%;

top:50%;

width:150px;

height:152px;

background:transparent url(../images/sun.png) no-repeat center center;

z-index:2;

}

#sun_red{

opacity:0;

}

在动画的开始，当它是白天的时候，我们想要展示一个黄色的太阳。太阳会落山，也就是向下移动，慢慢淡出。与此同时，我们将在红太阳中消失，那将会以同样的方式移动。首先，我们把这个位置设置在屏幕中央的某个位置。然后，我们将动画动作和淡出效果。

#clouds{

background:transparent url(../images/clouds.png) repeat-x top left;

z-index:3;

}

#ground{

height:232px;

background:transparent url(../images/ground.png) repeat-x bottom center;

}

云和景观将被重复，因为我们希望用户拥有更大的屏幕，同时也能看到完整的风景。试着在你的浏览器中放大/缩小，你会看到屏幕总是充满了图像。由于我们设置了要隐藏的主体的溢出，用户将永远不必滚动——他根本看不到任何超出浏览器边缘的东西。

#night{

background-color:#000;

z-index:4;

}

#stars{

bottom:200px;

background:transparent url(../images/stars.png) repeat bottom center;

z-index:5;

}

这个夜晚将会是一个在所有屏幕上都有黑色背景色的div。我们会让它的不透明度更高，从而使它显得缓慢，从而使它不那么透明。

#sstar{

left:40%;

top:10%;

width:126px;

height:80px;

background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;

}

流星将是一个特殊的元素:图像是一个简单的倾斜白线。我们会让它像流星一样移动它的背景位置，然后淡出。因此，我们需要将初始的背景位置设置为水平的80px (xpos)和-200px垂直(ypos)。所以基本上，我们想把它放在外面的右上角，然后让它出现在“可见区域”。

#moon{

top:60%;

width:168px;

height:168px;

background:transparent url(../images/moon.png) no-repeat center center;

z-index:6;

}

随着z - index,我们定义的元素将会在其他。当然，如果我们在HTML中列出它们，我们也会有同样的效果，但是在CSS中确保它总是更好。对于我们从一开始就不想展示的所有元素，我们给出了不透明度值为0，从而使它们变得透明。

这就是CSS部分。现在，让我们看看神奇的JavaScript。

3、JavaScript

为了使天空的背景颜色有动画效果，我们将使用一个可以在这里找到的jQuery插件。简单地在包含主jQuery脚本之后包括它。

让我们首先看一下我们将定义的整个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);

});

});

});

$('#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);

});

在第2行和第12行到第16行，我们定义了在同一时间发生的事情。最后一个整数表示毫秒，即效果的持续时间。黄色的太阳需要12秒的时间才能向下移动，变得更加透明，同时，红色的太阳变得更加不透明(但它也会向下移动)。

天空(第13行)将用18秒的时间将背景颜色从白色(如我们在CSS中定义)变为深紫色。

云(第14行)看起来会移动，因为我们定义了背景位置的动态变化，需要30秒。我们还说，它们最终将变得透明(这样我们就有了一个晴朗的夜空)。

由于我们想让整个景色变得更暗，我们通过增加黑色div的不透明度来降低夜晚的亮度。

现在，让我们看看在太阳落下后应该启动的函数会发生什么(第3行到第10行)。

首先，我们希望星星慢慢地“淡入”，设置透明度更高。在这之后，我们希望月亮从底部向中心出现。然后，流星就会出现。我们将它的背景位置改为0px 0px，然后把它向下移动。此外，为了使它成为真正的流星，我们使它很快消失:)通过设置透明度为0。

这是它!我希望你喜欢它!