HTML5七夕专属表白页面

文件目录展示

部分源码index.html

	<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
	<!--导库-->
	<script type="text/javascript" src="js/jquery.js"></script>
	<!-- 图片幻灯片效果-->
	<script type="text/javascript" src="js/roundabout.js"></script>
	<script type="text/javascript" src="js/roundabout_shapes.js"></script>
	<script type="text/javascript" src="js/gallery_init.js"></script>
	<!-- 下雪-->
	<script type="text/javascript" src="js/snowstorm.js"></script>
	<!-- 打字机效果-->
	<script type="text/javascript" src="js/text.js"></script>
	<!-- 画爱心-->
	<script type="text/javascript" src="js/ga.js" async=""></script>
	<script type="text/javascript" src="js/heart.js"></script>
	<!-- 移动div-->
	<script type="text/javascript" src="js/move.js"></script>
	<!-- 显示时间 -->
	<script type="text/javascript" src="js/time.js"></script>

你的浏览器过时了,试试火狐吧!

	<script type="text/javascript">
		setTimeout(makesnake, 42000);
	</script>
	<!--#Header-->
	<div id="header" style="opacity:0.85">
		<div id="title">
			I Love You MM
		</div>
	</div>

	<!-- #myContent -->
	<div id="myContent">
			<span id="blink" style="display: none;">_</span></div>
	<div id="contentToWrite" style="display:none">
		一时间不知道从哪说起,         <br>
			真爱来了，我们要好好把    <br>
			一时间不知道从哪说起,         <br>
			真爱来了，我们要好好把握。不管面临多大的压力，<br>
			不管前面的路如何崎岖.<br>
			不管经历过什么,我仍坚信最浪漫的事就是和<br>
			你一起慢慢变老.<br>
			还记得否,曾经的点点滴滴，从相识到现在，<br>
			从冷漠到关心,从谢绝到依赖，从生疏到相爱,<br>
			一切似乎都是那么遥远,又似乎那么触手可及.<br>
			正如某人说的那样,但求岁月静好,现世安稳.<br>
			一生守候不是一句简单而苍白的山盟海誓，<br>
			而是无数个平淡的日子同舟共济，相濡以沫.<br>
			相信右下角的计时器,将永远继续下去,直至数据溢出.<br>
			<br>
			-----------------------Just for You, YaRu<br>
	</div>
	<script type="text/javascript">
		writeContent(true);
	</script>
	

	<!-- #container -->
	<div id="container">
		<ul id="myRoundabout" class="roundabout-holder" style="padding: 0px; position: relative; z-index: 100;">
	  	<li class="roundabout-moveable-item roundabout-in-focus" current-scale="1.0000" style="position: absolute; left: 122px; top: 87px; width: 350px; height: 222px; opacity: 1; z-index: 400; font-size: 16px;">
			<img src="img/1.jpg" alt=""></li>
		<li class="roundabout-moveable-item" current-scale="0.7927" style="position: absolute; left: -0.4px; top: 110px; width: 277.445px; height: 175.9794px; opacity: 1; z-index: 296; font-size: 12.68px;"><img src="img/2.jpg" alt=""></li>
		<li class="roundabout-moveable-item" current-scale="0.4573" style="position: absolute; left: 473.8px; top: 147.2px; width: 160.055px; height: 101.5206px; opacity: 1; z-index: 129; font-size: 7.32px;"><img src="img/3.jpg" alt=""></li>
		<li class="roundabout-moveable-item" current-scale="0.4573" style="position: absolute; left: -39.8px; top: 147.2px; width: 160.055px; height: 101.5206px; opacity: 1; z-index: 129; font-size: 7.32px;"><img src="img/4.jpg" alt=""></li>
		<li class="roundabout-moveable-item" current-scale="0.7927" style="position: absolute; left: 317px; top: 110px; width: 277.445px; height: 175.9794px; opacity: 1; z-index: 296; font-size: 12.68px;"><img src="img/5.jpg" alt=""></li>
	  </ul>
	</div>
	<script type="text/javascript">
		setTimeout(move, 15000);
	</script>


	<!-- #time -->
	<div id="time">
		<span id="show"></span>
		<script type="text/javascript">
			setTimeout("showTime()", 40000);
		</script>
	</div>

**

部分效果展示

**
## 完整源码请关注微信公众号《码渣工厂》回复“七夕”即可免费获取