<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

首先，我們來分下一下，這個海報動態(tài)部分的組成部分：

1.主題和利益點的上下動態(tài)部分；

2.孔明燈飄上天的動態(tài)部分；

3.大背景切換的動態(tài)部分；

4.京東狗附在月亮圖的切換動態(tài)部分。

海報的各個部分都被分割成好幾個部分而獨立存在，他們之間的獨立相互結合在一起形成了整個整體，獨立的個體利用HTML語言把他們結合起來，這就是網(wǎng)頁設計的功能。我們平時在電商設計中，美工設計利用PS做好海報生成JPG圖片，圖片大了利用DW切下圖，切完圖，上傳圖片空間，添加對應鏈接就OK了。一些大的店鋪可能都很專業(yè)，也許會有前端工程師的崗位，他們會把美工做成的圖交給前端工程師，前端工程師再把圖片利用css,html和JavaScript實現(xiàn)網(wǎng)頁動態(tài)的功能。

也許，你以后會想開一家屬于自己特點的店鋪，有錢了可以把這些交給自己的前端工程師，若你經(jīng)濟上不允許，自己學，自己來可以，如今的網(wǎng)絡那么發(fā)達，什么都可以學，只要你想學，什么都有。所以，你是否希望你的店鋪能有別于其他的店鋪嗎？不僅有特效，還有視頻（暫且不做介紹）。

對于電商的設計師來說，不需要懂得太多的html(網(wǎng)頁語言)，只要懂得DIV ul li position z-index a就足夠了，比如這個定位，什么時候用相對定位，什么時候用絕對定位，這個DIV的層級是多少，在那個div的上面還是下面等等。如果你想讓你的店鋪有更多的特效出現(xiàn)，那么CSS就要花點時間了，不過，這個應該不是很難，很容易懂，這個有點扯遠了。

對于這張海報來說，最外面的容器是名字為movebox的div，它是父級元素，把它的位置定位為相對位置，也就是position:relatvie;那么它里面的子級元素就以絕對位置來定位，我們在CSS中看到很多的position:absolute;以絕對定位的div就結合其中的left,top,right,bottom來具體定位，這個數(shù)字是多少呢？我們可以用PS來確定具體的大小數(shù)值。

1.主題和利益點它們所在的div名字的CSS樣式格式分別是：

.wordall{position:absolute;top:10px;left:-20px;z-index:20;animation: worda 6s linear infinite; } // 天涯共此食

.wordald{position:absolute;top:10px;left:0px;z-index:10;animation: worda 6s linear infinite;} // 禮盒買一贈一，部分每滿199減100

這兩張png圖的尺寸都是1920x768px，他們的絕對定位距頭部TOP10px,距離左邊的距離一個-10px,另一個是0px,他們引用一個共同的運動，這個運動的名字是 worda,這個運動的時間是6秒 ，線性漸變，永遠往返運動。這個運動的CSS格式就是：

@keyframes worda {

0% { transform: translateY(0px); }

30% { transform: translateY(5px);}

60% { transform: translateY(10px);}

90% { transform: translateY(5px);}

100% {transform: translateY(0px);}

}

我大概翻譯下這個運動的意思：如果是大神或者專業(yè)的可以忽略我的啰嗦，當這個運動在6s的0%時間里，運動的位置是0px，也就是說不動，當運動在6s的30%時間里，在y軸向上運動了5px，在6s的60%時間向上運動了10px,在6s的90%時間里向上運動了5px(也就是說從最高點回來了5px),在6s的100%時間里，也就是6秒鐘的最后，回到了最初的起點。

就是這樣一個格式造就了這個圖形做上下來回往返運動。

其實，我們可以改下，把格式里的Y改成X，她就會做左右來回的往返運動。我們可以設想再改下，給這個運動格式添加X和Y，它會怎樣的運動呢？這個格式是有的。就是這樣稍微的改動它就會有另一種的表現(xiàn)形式，這就是CSS的魅力所在！

2.孔明燈飄上天動態(tài)部分：

這個CSS所想表達的意思就是：孔明燈突然從屋檐上出現(xiàn)，緩緩地放飛上天，慢慢地消失在人們的視野里。

孔明燈的圖片也是PNG格式，有四張圖片，他們的大小也是1920x768，跟外部的DIV容器大小是一樣的，他們div的class名字分別是：kongming1,kongming2,kongming3,kongming4。他們的CSS樣式格式分別是：

.kongming1{position:absolute;animation: kma1 9s linear infinite;z-index:3;}

.kongming2{position:absolute;animation: kma2 10s linear infinite;z-index:3;}

.kongming3{position:absolute;animation: kma3 7s linear infinite;z-index:3;}

.kongming4{position:absolute;animation: kma4 12s linear infinite;z-index:3;}

這一次它們的運動軌跡是不一樣的，所以名字不一樣kma1 ,kma2 kma3 kma4；還有時間也不一樣9s 10s 7s 12s 。

我只列出其中兩項出來做例子：

@keyframes kma1 {

0% { transform:translate(0px,0px); opacity: 0; }

9% { transform:translate(-8px,-8px);opacity: 1;}

92% { transform:translate(-155px,-155px); opacity: 1; }

100% {transform:translate(-195px,-195px);opacity: 0; }

}

@keyframes kma2 {

0% { transform:translate(0px,0px); opacity: 0; }

6% { transform:translate(-10px,-10px);opacity: 1;}

90% { transform:translate(-162px,-162px); opacity: 1; }

100% {transform:translate(-180px,-180px);opacity: 0; }

}

這個格式跟上面的格式基本一樣的，我想有我前面的翻譯，這個小白們應該發(fā)現(xiàn)不會很難了吧，你們猜的不錯，這個格式包含了X軸和Y軸方向上的運動，括號里面第一個是X軸方向的參數(shù)值，第二個是Y軸方向的，只不過上面只有一個屬性transform(變形)，這一次有了第二個屬性：opacity(透明)，1表示出現(xiàn)，0表示隱藏。就這樣一個格式，舉一反三就簡單多了。

3.大背景的切換主題：

這大背景看似是兩張圖片的切換，如果沒看到代碼，不是精通的我們很難發(fā)現(xiàn)是怎么做的，但看了代碼之后，才發(fā)現(xiàn)原來是這么簡單。

其實它兩張圖片，其中有一張不用變的，只需要變第二張背景圖片就可以了，也就是說對第二張圖片用CSS來實現(xiàn)出現(xiàn)和隱藏的功能。

它的CSS樣式格式如下：

.imgbgl{position:absolute;animation: bgl1 18s linear infinite;z-index:2;width:1920px;}

@keyframes bgl1 {

0% { opacity: 0; }

45% { opacity: 0;}

50% { opacity: 1;}

95% { opacity: 1;}

100% { opacity: 0;}

}

這個大背景的切換主題時間跟下面要講的京東狗圖片切換主題的時間是一樣的（來個承上啟下）

4.京東狗附在月亮圖的切換動態(tài)部分。

.moon1{position:absolute;animation: moon1 18s linear infinite;z-index:8;}

.moon2{position:absolute;animation: moon2 18s linear infinite;z-index:8;}

@keyframes moon1 {

0% { transform: translateY(768px); }

42% { transform: translateY(768px);}

50% { transform: translateY(0px);}

92% { transform: translateY(0px);}

100% {transform: translateY(768px);}

}

@keyframes moon2 {

0% { transform: translateY(0px); }

42% { transform: translateY(0px);}

50% { transform: translateY(768px);}

92% { transform: translateY(768px);}

100% {transform: translateY(0px);}

}

同樣，這兩張png圖的大小也是一樣的1920x768，我們從特效的表現(xiàn)來看，這兩個動作是反向而來的，你左我右，你上我下的意思，看參數(shù)就知道了，在同一段時間里，我們所要到的那幾個地方都是一樣的，只不過時間不一樣，你8點在北京，我8點在上海，你19點在上海，我19點在北京，打個簡單的比喻讓人易于理解。

總結：這個中秋的海報設計得很有意義：中秋到了，雖然你我都身在異地，但我們在共同的節(jié)日了，共享一樣的美食就如同陪在家人身邊一樣。

兩只京東狗圖片和背景圖片的同時切換就襯托了天涯這個主題，第四部分的CSS特效起到了海報畫龍點睛的作用。

這就是CSS的魅力所在，還好京東的商家店鋪不同天貓，CSS權限在京東是免費的，而在天貓是需要購買的！

如果有需要完整代碼的小伙伴歡迎在底下留言，我會把代碼發(fā)給你們，喜歡的小伙伴就點一波關注吧！自媒體不容易，多謝大家的支持！

（本文所涉及到的圖片，代碼版權歸原作者所有，不可用作商業(yè)用途，僅供學習之用）

擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

在JavaScript中用分號來結束一條語句或者一行代碼并不是必需的。換行符通常也會被假定為分號（解析器將換行視為當前語句的一部分，除非有一個顯式的分號結束這一行），除非換行符處某個控制結構中。

一、可以少寫分號的代碼

知道了這個事實之后，我們來看一段簡單的代碼：

alert('hello')

alert('world')

alert('!')

上面這段代碼會被解釋成下面這樣：

alert('hello');

alert('world');

alert('!');

這樣看，寫不寫分號其實問題并不大，有時覺得少寫一個分號反而覺得省事，可事實并非如此。

二、不可以少寫分號的代碼

看下面這段判斷語句：

if(a==b)

alert('true')

alert('false')

這段代碼會按照if控制結構被解釋成下面這樣：

if(a==b){

alert('true!')

}

alert('false')

最后的總結：

總結就是一句話：無論在什么情況下都要使用分號和花括號。減少分號帶來的風險。