html5特效源碼
① 去哪兒首頁源代碼html5
、在電腦桌面空白處單擊右鍵，新建一個記事本並打開
2、在新建文件中輸入如下代碼。 html語言都是以htmlheadtitlebody等標簽開始，以/html/head/title/body標簽作為結束。
3、接下來要在title/title標簽中間輸入標題（如個人網頁）在body/body中輸入「自己做的第一個網頁，厲害吧！」完成後點擊保存。並將記事本後綴名.txt改為.html格式
4、將記事本重命名為.html格式後，出現如下格式。
5、雙擊打開此文件就會出現瀏覽器網頁效果了。
(1)html5特效源碼擴展閱讀：
前端和後端的區別：
1、展示方式
前端指的是用戶可見的界面，網站前端頁面也就是網頁的頁面開發，比如網頁上的特效、布局、圖片、視頻，音頻等內容。前端的工作內容就是將美工設計的效果圖的設計成瀏覽器可以運行的網頁，並配合後端做網頁的數據顯示和交互等可視方面的工作內容。
後端是指用戶看不見的東西，通常是與前端工程師進行數據交互及網站數據的保存和讀取，相對來說後端涉及到的邏輯代碼比前端要多，後端考慮的是底層業務邏輯的實現，平台的穩定性與性能等。
2、所用技術
前端開發用到的技術包括但不限於html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack、AngularJs、ReactJs、VueJs等技術。
後端開發以java為例，主要用到的包括但不限於Struts、spring、springmvc、Hibernate Http協議、Servlet、Tomcat伺服器等技術。
3、工作職責
前端工程師主要的工作職責分為三大部分，分別是傳統的Web前端開發，移動端開發和大數據呈現端開發。
後端工程師的主要職責也集中在三大部分，分別是平台設計、介面設計和功能實現。
4、知識結構
在知識結構方面，前端開發涉及到的內容包括Html、CSS、JavaScript、Android開發（採用Java或者kotlin）、iOS開發（採用OC或者Swift）、各種小程序開發技術（類Html），隨著前端開發任務的不斷拓展，前端開發後端化也是一個較為明顯的趨勢。
後端開發的重點在於演算法設計、數據結構、性能優化等方面，在具體的功能實現部分可以採用Java、Python或者PHP等編程語言來實現。
② 怎麼給html5背景加上js粒子特效
使用了particles.js
particles.js可以從github網站下載到最新的源碼，網址是 https://github.com/VincentGarreau/particles.js/
使用方法非常簡單
第一步，在html中引入腳本文件 particles.min.js，這個文件在下載的壓縮包里可以找到
<scriptsrc="particles.min.js"></script>
第二步，在html中放入一個div容器，設置id為particles-js。這個一般放在所有網頁元素的最後面就可以。
<divid="particles-js"></div>
<styletype="text/css">
#particles-js{
position:absolute;
top:0;
width:100%;
}
</style>
第三步，設置窗口樣式
<styletype="text/css">
#particles-js{
z-index:-1;
position:absolute;
top:0;
width:100%;
background:#aaa;
}</style>
第四步，腳本生成粒子效果，可以單獨放在一個js文件里，也可以放在<script>標簽里。無論如何，這段腳本要出現在div容器之後。
particlesJS("particles-js",{"particles":{"number":{"value":380,"density":{"enable":true,"value_area":800
}
},"color":{"value":"#ffffff"
},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"
},"polygon":{"nb_sides":5
},"image":{"src":"img/github.svg","width":100,"height":100
}
},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false
}
},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false
}
},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1
},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200
}
}
},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"
},"onclick":{"enable":true,"mode":"push"
},"resize":true
},"modes":{"grab":{"distance":140,"line_linked":{"opacity":1
}
},"bubble":{"distance":400,"size":40,"ration":2,"opacity":8,"speed":3
},"repulse":{"distance":200,"ration":0.4
},"push":{"particles_nb":4
},"remove":{"particles_nb":2
}
}
},"retina_detect":true});
③ 網頁特效代碼
在HTML文件中添加網頁特效代碼，一般有三種情況。
第一，只加在HTML文件頭部，即HTML文件中<head>……</head>之間的代碼。這類代碼只需要加在這個部分，即可達到預期的效果。
第二，只加在HTML文件體部。即HTML文件中<body>……</body>之間的代碼。這類代碼只需要加在這個部分，即可達到預期的效果。如在你題目中提到的就屬於這一類。
除上述情況外，多數代碼需要先在頭部（<head>……</head>之間）在上一些屬性性質的代碼，但是特效的主代碼需要添加在體部（body>……</body>之間），否則，特效不能正常顯示，有時還會出現錯誤，影響整個頁面的正常顯示。
添加特效代碼的方法：
先要用HTML編輯軟體，如常見的文本編輯器「記事本」，打開需要編輯的文件，根據特效代碼的要求，在文件中找到相應位置，復制，粘貼特效代碼，保存即可。修改完畢後，即可在瀏覽器中看到相應的效果。
在添加的時候一定要注意，一定要按照特效源碼的要求添加，此外，還要保證源碼的完整性，一個標點符號都不能少，也不能多。
另外要說的是，根據我的經驗，直接從網上復制來的代碼，不一定都能直接粘貼了用，一部分必須通過一個軟體來中轉。比如，先把網上的代碼復制後，粘貼到「記事本」中，然後再復制、粘貼到相應的文件位置上。
最後，介紹你幾個經典網頁特效站。
1、網頁特效集錦：http://www.helpor.net
2、javascript網頁特效：http://www.baron.com.cn/javascript
3、萬旭網頁特效：http://js.wanxu.com
4、網頁特效夢工廠：http://www.zlce.net/web
5、網頁製作大寶庫網頁特效大全：http://www.dabaoku.com/texiao
④ html5網頁底部會跳動的小愛心，有大神有源碼嗎
在下研究了一下源代碼，滲透到了伺服器找了一下：
最終發現，這是引入了Font Awesome圖標，並啟用css3動畫所製成的
原理為：
用Font Awesome引入一個心形，並用css設置為紅色，再用css3關鍵幀動畫使其放大縮小
這是從官網瓢來的源代碼：（請確認已引入Font Awesome）
<i class="fa fa-heart" style="font-size:48px;color:red;animation:iconAnimate 5s;"></i>
css3代碼如下
@keyframes iconAnimate {
0%, 100%{
transform:scale(1);
transform:scale(0.9);
transform:scale(1.1);
transform:scale(1.1);
}
10%, 30%{
}
20%, 40%, 60%, 80%{
}
50%, 70%{
}
}