<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>七夕520+背景音樂</title>
<!-- <link rel="stylesheet" type="text/css" href="css/home.css" target="_blank" rel="external nofollow" > -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/home.js"></script> -->
<style type="text/css">
body {
margin:0;
padding:0px;
background-color:#2C3437;
}
.p1 {
font-size: 60px;
font-weight: bold;
color: red;
text-align: center;
}
.p2 {
font-size: 40px;
color: pink;
font-weight: bold;
text-align: center;
}
.maximum {
width: 1100px;
margin: auto;
}
.content {
display:inline-block;
width:350px;
height:400px;
padding-top:70px;
margin-right:5px;
margin-left:5px;
}
.header {
margin-left:20px;
}
.header-f1 {
margin-left:242px;
}
div>div>div {
display:block;
height:20px;
}
div>div>div>div {
width:16px;
height:16px;
background-color:#ff00d8;
display:inline-block;
float:left;
margin:2px;
}
div>div.content1>div>div.fl {
background-color:#ee30a7;
}
div>div.content2>div>div.fl {
background-color:#adff2f;
}
div>div.content3>div>div.fl {
background-color:#ab82ff;
}
.header-0 {
margin-left: 182px;
}
</style>
</head>
<body>
<p class="p1">
<span>七</span>
<span>夕</span>
<span>快</span>
<span>樂</span>
</p>
<p class="p2">
<span>雨</span>
<span>滴</span>
<span>會</span>
<span>變</span>
<span>成</span>
<span>咖</span>
<span>啡</span>
<span>，</span>
<span>種</span>
<span>子</span>
<span>會</span>
<span>開</span>
<span>出</span>
<span>玫</span>
<span>瑰</span>
<span>，</span>
<span>旅</span>
<span>行</span>
<span>是</span>
<span>一</span>
<span>種</span>
<span>約</span>
<span>會</span>
<span>，</span>
<span>不</span>
<span>是</span>
<span>沒</span>
<span>人</span>
<span>陪</span>
<span>，</span>
<span>隻</span>
<span>怪</span>
<span>咖</span>
<span>啡</span>
<span>喝</span>
<span>不</span>
<span>醉</span>
<span>，</span>
<span>雨</span>
<span>一</span>
<span>碰</span>
<span>就</span>
<span>碎</span>
<span>，</span>
<span>隻</span>
<span>有</span>
<span>你</span>
<span>依</span>
<span>然</span>
<span>完</span>
<span>美</span>
<span>。</span>
</p>
<div class="maximum">
<div class="content content1">
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
</div>
<!-- 2字 -->
<div class="content content2">
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl header-f1" ></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
</div>
<!-- 0字 -->
<div class="content content3">
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl header-0"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
<div class="header">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
</div>
<audio id="music" autoplay="autoplay" loop="loop" preload="auto" src="http://www.xyptz.cn/aini.mp3"></audio>
<script type="text/javascript">
$(function() {
animate();//方法
});
function animate() {//運用方法
$('div>div>div>div').each(function() {
$(this).css({
position: 'relative',
top: '-400px',
opacity: 0//用來控制透明度
});
var wait = Math.floor((Math.random() * 3000) + 1);
$(this).delay(wait).animate({//delay用來延遲動畫效果
top: '0px',
opacity: 1
}, 2000, function() {
$(this).delay(wait).animate({
top: '50px',
opacity: 0
}, 1000, function() {
$(this).delay(wait).animate({
top: '0px',
opacity: 1
}, 500);
});
});
});
$('span').each(function() {
$(this).css({
position: 'relative',
top: '-400px',
opacity: 0//用來控制透明度
});
var wait = Math.floor((Math.random() * 3000) + 1);
$(this).delay(wait).animate({//delay用來延遲動畫效果
top: '0px',
opacity: 1
}, 2000, function() {
$(this).delay(wait).animate({
top: '50px',
opacity: 0
}, 1000, function() {
$(this).delay(wait).animate({
top: '0px',
opacity: 1
}, 500);
});
});
});
}
</script>
</body>
</html>