1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<div class="container demo-1"> <div class="content"> <div id="large-header" class="large-header"> <canvas id="demo-canvas"></canvas> <h1 class="main-title">Connect <span class="thin">Three</span></h1> </div> </div> </div>
4、书写css代码。.large-header { position: relative; width: 100%; background: #333; overflow: hidden; background-size: cover; background-position: center center; z-index: 1; }.demo-1 .large-header { background-image: url('../images/demo-1-bg.jpg'); }.main-title { position: absolute; margin: 0; padding: 0; color: #f9f1e9; text-align: center; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }.demo-1 .main-title { text-transform: uppercase; font-size: 4.2em; letter-spacing: 0.1em; }.main-title .thin { font-weight: 200; }@media only screen and (max-width : 768px) {.demo-1 .main-title, .demo-3 .main-title, .demo-4 .main-title { font-size: 3em; }.demo-2 .main-title { font-size: 4em; }}
5、书写并添加js代码。<script src="js/TweenLite.min.js"></script> <script src="js/EasePack.min.js"></script> <script>(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); };}());</script> <script src="js/demo-1.js"></script>
6、代码整体结构。
7、查看效果。
