Html5实现生日快乐网站，自带音效与蛋糕动画！
计算机基础与编程
计算机前端方面的一手资料，提供全方位的指导，带你走进新时代网络的大门。
Official Account
前言
效果如何？
以图片和视频为例：
视频：
图片：（图中的矩形方块均为动态）
图片1：
图片2：（动态）
图片3：
图片4：（轮播图方法实现，已扩充10个页面）
课前准备
1.工具选择
sublime-Text或idea或其他
2.语言使用
html5+Css+JavaScript+jquery-1.8.3等
源码展示
由于代码量太大，所以只展示部分：
html5
<div class="htmleaf-container"><div class="wrapper"><div class="container"><h1>生日快乐</h1><form class="form"><input id="userName" name="userName" type="text" placeholder="姓名"><input id="pwd" name="pwd" type="password" placeholder="密码"><button type="submit" id="login-button">进入</button></form></div><ul class="bg-bubbles"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
Css:
#fp-nav ul li a.active span,.fp-slidesNav ul li a.active span {background: #fff;}#fp-nav ul li a span,.fp-slidesNav ul li a span {border-color:#fff;}.bgcolor {background: #ee9ca7;background: -webkit-linear-gradient(top left, #ee9ca7 0%, #ee9ca7 100%);background: linear-gradient(to bottom right, #ee9ca7 0%, #ee9ca7 100%);opacity: 0.9;}.bg-bubbles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}.bg-bubbles li {position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: -160px;-webkit-animation: square 30s infinite;animation: square 30s infinite;-webkit-transition-timing-function: linear;transition-timing-function: linear;}.bg-bubbles li:nth-child(1) {left: 10%;}.bg-bubbles li:nth-child(2) {left: 20%;width: 80px;height: 80px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 17s;animation-duration: 17s;}.bg-bubbles li:nth-child(3) {left: 25%;-webkit-animation-delay: 4s;animation-delay: 4s;}.bg-bubbles li:nth-child(4) {left: 40%;width: 60px;height: 60px;-webkit-animation-duration: 22s;animation-duration: 22s;background-color: rgba(255, 255, 255, 0.25);}.bg-bubbles li:nth-child(5) {left: 70%;}.bg-bubbles li:nth-child(6) {left: 80%;width: 120px;height: 120px;-webkit-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2);}
JavaScript：
$(function(){$('#dowebok').fullpage({'navigation': true,'navigationPosition':"left",'navigationColor':['#fff'],});});<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script><script src="js/jquery-1.8.4.min.js" type="text/javascript"></script>
写在最后
· 推荐阅读 ·
微软宣布退役IE浏览器……
程序员中的鄙视链，太扎心了……
别了，张一鸣……
点个在看，爱你们呦