<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery和CSS3创建日夜场景切换动画</title>
<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>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/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>
jQuery+CSS3实现的日夜场景切换动画效果源码.zip
版权申诉
3 浏览量
2022-11-06
23:43:24
上传
评论
收藏 310KB ZIP 举报
jQuery+CSS3实现的日夜场景切换动画效果源码.zip （14个子文件） 
132692072413899585 css 
style.css 2KB images 
sky.png 4KB stars.png 22KB ground.png 30KB clouds.png 163KB moon.png 7KB sun2.png 14KB shootingstar.png 4KB sun.png 17KB
index.html 2KB title.png 19KB js jquery-1.3.2.js 118KB jquery.color.js 4KB back.png 5KB资源评论
