1 效果：
2 知識點：
=======
2.1 html的基礎知識。
2.2 css3的基礎知識。
2.3 vue的基礎知識。
2.4 程式碼講解非常清楚，小白看了都會。
3 html骨架：
========
3.1 程式碼：
HTML5 中僅僅規定這一種宣告。沒有結束標籤，宣告不區分大小寫。
總是給您的 HTML 文件新增 <!DOCTYPE> 宣告，確保瀏覽器能夠預先知道文件型別。
3.3 <meta charset="utf-8">：
charset=”utf-8”是告知瀏覽器此頁面屬於什麼字元編碼格式，下一步瀏覽器做好“翻譯”工作。
常見的字元編碼有：gb2312、gbk、unicode、utf-8。
4 設定body的div部分：
================
4.1 這部分：
4.3.1 <div> 是一個塊級元素，可定義文件中的節或者分割槽（division/section），換行是 <div> 固有的唯一格式表現。
4.3.2 <div> 元素應用 class 或 id 屬性：簡單的架構上來說基本沒區別，但是有下面注意事項：
（1）class 用於元素組，而 id 用於標識單獨的唯一的元素。
（2）在css中：id的內容前加#；class前加.。在vue的js中，id為app，則例項化el物件也是：'#app'。
4.4 vue的指令：v-for和v-bind（注意：vue的2.x版本）
4.4.1 v-for
格式：
v-for="(item,index) in items"<p v-for="(item,i) in list">{{i}},{{item}}</p>#本程式碼中，v-for="(dna,i) in sequence"#dna是item，是專案，i是index，是索引值4.4.2 v-bind
v-bind 主要用於屬性繫結。
<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">駝峰命名法否則報錯</div>activeColor為駝峰命名法；active-color短線法可能報錯。
font-size在css中可以，在v-bind:style中必須改為駝峰命名法，即fontSize。
5 head的css部分程式碼：
<style>/*第1步：網頁整體body設定*/body{\t/*網頁背景顏色*/\tbackground-color: black;}/*第2步：對id的設定：帶#號*//*#app代表來自id*/#app {\tposition:relative;}/*連線線的顏色*/#line {\twidth:0;\theight:145px;\tborder:2px solid transparent;\tborder-radius:0px;\topacity:0.5;\tbackground-color:blue;\ttop:50px;\tleft:23px;\tbottom:50px;\t-webkit-animation:5s lineNode linear infinite;\tanimation:5s lineNode linear infinite;}/*第3步：對class的設定：帶.號*//*.outer代表來自class*/.outer {\tposition:fixed;\ttop:50%;\tleft:50%;\ttransform:translate(-50%,-50%);\t-webkit-transform:translate(-50%,-50%);\ttext-align:center;\toverflow:hidden;\twidth:90%;}.inner {\tposition:relative;\twidth:50px;\theight:250px;\tdisplay:inline-block;}.inner div {\tposition:absolute;\twidth:50px;\theight:50px;\tborder-radius:50%;}.top {\t/*上面的小球*/\ttop:0;\tbackground-color:lawngreen;\t-webkit-animation:5s topNode ease-in-out infinite;\tanimation:5s topNode ease-in-out infinite;}.foot {\t/*腳的小球*/\tbottom:0;\tbackground-color:rebeccapurple;\t-webkit-animation:5s footNode ease-in-out infinite;\tanimation:5s footNode ease-in-out infinite;}/*第4步：動畫設定，請注意本機為谷歌瀏覽器，如果相容可能需要增加設定*//*topNode動畫：上面的小球*/@keyframes topNode {0% {\ttransform:scale(0.5);\topacity:0.75;\ttop:0;}25% {\ttransform:scale(1);\topacity:1;}50% {\ttransform:scale(0.5);\topacity:0.75;\ttop:200px;}75% {\ttransform:scale(0.25);\topacity:0.5;}100% {\ttransform:scale(0.5);\topacity:0.75;\ttop:0;}}/*footNode動畫：下面小球*/@keyframes footNode {0% {\ttransform:scale(0.5);\topacity:0.75;\tbottom:0;}25% {\ttransform:scale(0.25);\topacity:0.5;}50% {\ttransform:scale(0.5);\topacity:0.75;\tbottom:200px;}75% {\ttransform:scale(1);\topacity:1;}100% {\ttransform:scale(0.5);\topacity:0.75;\tbottom:0;}}/*lineNode動畫：連線線*/@keyframes lineNode {0% {\ttransform:scale(0.5);\ttransform:rotateX(0deg);}100% {\ttransform:scale(1);\ttransform:rotateX(360deg);}}</style>6 body的vue的js程式碼部分：
<script>// vue例項化var vm = new Vue({\t// 物件是#app el: '#app',\t// 資料是序列 data: { sequence: [] },\t// 方法，掛在這個序列 mounted() {\t\t// 序列和長度，60（最佳）為分母，越大則序列越短，當≤50，序列變長，可能出現2段序列 this.sequence = new Array(Math.round(document.body.clientWidth / 60)); }});</script>vue的mounted:html載入完成後執行。執行順序：子元件-父元件。
mounted鉤子函式一般用來向後端發起請求，拿到資料後做一些業務處理。該函式在模板渲染完成後才被呼叫。DOM操作一般是在mounted鉤子函式中進行。
mounted:在模板渲染成html後呼叫，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。
7 完整程式碼：
===自己整理並分享出來===