此处有玫瑰花随机飘落噢
一段小视频演示一下动画效果还内置浪漫音乐哟!
直接贴上HTML部分代码:
<body>
<div id='content'>
<ul class="content-wrap">
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_bottom"></div>
</div>
<!-- 云 -->
<div class="cloudArea">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
</div>
<div id="sun"></div>
</li>
<li> <!-- 背景图 -->
<div class="b_background"></div>
<div class="b_background_preload"></div>
<!-- 商店 -->
<div class="shop">
<div class="door">
<div class="door-left"></div>
<div class="door-right"></div>
</div>
<!-- 灯 -->
<div class="lamp"></div>
</div>
<!-- 鸟 -->
<div class="bird birdFly"></div>
</li>
<li>
<!-- 背景图 -->
<div class="c_background">
<div class="c_background_top"></div>
<div class="c_background_middle"></div>
<div class="c_background_bottom"></div>
</div>
<!-- 小女孩 -->
<div class="girl"></div>
<!-- 水波 -->
<div class="bridge-bottom">
<div class="water">
<div id="water1" class="water_1"></div>
<div id="water2" class="water_2"></div>
<div id="water3" class="water_3"></div>
<div id="water4" class="water_4"></div>
</div>
</div>
<!-- 星星 -->
<ul class="stars">
<li class="stars1"></li>
<li class="stars2"></li>
<li class="stars3"></li>
<li class="stars4"></li>
<li class="stars5"></li>
<li class="stars6"></li>
</ul>
<!-- logo图 -->
<div class="logo">祝天下有情人终成眷属</div>
</li>
</ul>
<!-- 雪花 -->
<div id="snowflake"></div>
<!-- 小男孩 -->
<div id="boy" class="charector"></div>
</div>
</body>
由于代码量的问题小编就只上传部分代码图片
css部分代码:
js部分代码
如果感兴趣大家可以直接在小编的GitHub上面把源码拉下来噢!https://github.com/yyx1101/qixi-css
码字不易,还请小哥哥们给个赞!!谢谢0.0,给大家拜个早年,新年快乐一八吉祥,早日脱单
注意:本文归作者所有,未经作者允许,不得转载