利用HTML5实现七夕情人节表白代码



11 40 14



特效描述:利用HTML5实现七夕情人节表白代码,利用HTML5实现七夕情人节表白代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="all">

2. 引入JS

<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>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript" src="js/time.js"></script>
<script type="text/javascript" src="js/makesnake.js"></script>

3. HTML代码

<!-- thanks for watching! -->
<span id="span0" class="spanstyle">T</span><span id="span1" class="spanstyle">h</span>
<span id="span2" class="spanstyle">a</span><span id="span3" class="spanstyle">n</span>
<span id="span4" class="spanstyle">k</span><span id="span5" class="spanstyle">s</span><span id="span6" class="spanstyle">
 </span><span id="span7" class="spanstyle">f</span><span id="span8" class="spanstyle">o</span><span id="span9" class="spanstyle">r</span>
 <span id="span10" class="spanstyle"> </span><span id="span11" class="spanstyle">w</span>
 <span id="span12" class="spanstyle">a</span><span id="span13" class="spanstyle">t</span><span id="span14" class="spanstyle">c</span><span id="span15" class="spanstyle">h</span>
 <span id="span16" class="spanstyle">i</span><span id="span17" class="spanstyle">n</span><span id="span18" class="spanstyle">g</span><span id="span19" class="spanstyle">!</span>
<script type="text/javascript">
	setTimeout(makesnake, 42000);
</script>
<!--#Header-->
<div id="header" style="opacity:0.85">
	<div id="title">
		I Love You Forever
	</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>
<!-- #bg -->
<div id="bg">
</div>
<!-- #time -->
<div id="time">
	<span id="show"></span>
	<script type="text/javascript">
		setTimeout("showTime()", 40000);
	</script>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5文字动画 h5文字边框动画 html5文字动画 html5文字边框动画 h5光标动画 html5光标动画
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到