京東商家店鋪中秋banner海報(bào)CSS動(dòng)態(tài)特效

首先，我們來分下一下，這個(gè)海報(bào)動(dòng)態(tài)部分的組成部分：

1.主題和利益點(diǎn)的上下動(dòng)態(tài)部分；

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

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

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

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

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

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

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

1.主題和利益點(diǎn)它們所在的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,距離左邊的距離一個(gè)-10px,另一個(gè)是0px,他們引用一個(gè)共同的運(yùn)動(dòng)，這個(gè)運(yùn)動(dòng)的名字是 worda,這個(gè)運(yùn)動(dòng)的時(shí)間是6秒，線性漸變，永遠(yuǎn)往返運(yùn)動(dòng)。這個(gè)運(yùn)動(dòng)的CSS格式就是：

@keyframes worda {

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

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

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

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

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

}

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

就是這樣一個(gè)格式造就了這個(gè)圖形做上下來回往返運(yùn)動(dòng)。

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

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

這個(gè)CSS所想表達(dá)的意思就是：孔明燈突然從屋檐上出現(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;}

這一次它們的運(yùn)動(dòng)軌跡是不一樣的，所以名字不一樣kma1 ,kma2 kma3 kma4；還有時(shí)間也不一樣9s 10s 7s 12s 。

我只列出其中兩項(xiàng)出來做例子：

@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; }

}

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

3.大背景的切換主題：

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

其實(shí)它兩張圖片，其中有一張不用變的，只需要變第二張背景圖片就可以了，也就是說對第二張圖片用CSS來實(shí)現(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;}

}

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

4.京東狗附在月亮圖的切換動(dòng)態(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)來看，這兩個(gè)動(dòng)作是反向而來的，你左我右，你上我下的意思，看參數(shù)就知道了，在同一段時(shí)間里，我們所要到的那幾個(gè)地方都是一樣的，只不過時(shí)間不一樣，你8點(diǎn)在北京，我8點(diǎn)在上海，你19點(diǎn)在上海，我19點(diǎn)在北京，打個(gè)簡單的比喻讓人易于理解。

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

兩只京東狗圖片和背景圖片的同時(shí)切換就襯托了天涯這個(gè)主題，第四部分的CSS特效起到了海報(bào)畫龍點(diǎn)睛的作用。

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

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

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

查郭一璞發(fā)自凹非寺
量子位報(bào)道 | 公眾號 QbitAI

HTML不是編程語言，但這并不妨礙精通它的大佬玩出花來。

普通的前端，用HTML+CSS制作網(wǎng)頁，元素簡單，工具豐富。

大佬級前端，用HTML+CSS繪畫，全程不用PS、AI這種圖形化的圖片編輯器，單純敲一行行代碼純手工繪制。

把代碼轉(zhuǎn)換之后，就變成了鮮嫩的水果：

或者畫出洛可可風(fēng)格的古典女性肖像：

還有弗拉芒巴洛克肖像風(fēng)格的人物畫像，充滿了中世紀(jì)的禁欲感：

現(xiàn)代的也有，比如這位在粉色燈光下的著禮服的妹子：

以及充滿者50年代氣息的復(fù)古風(fēng)人物海報(bào)：

曲線、光影、漸變，每個(gè)元素都相當(dāng)復(fù)雜。

而且，創(chuàng)作過程中不用SVG，只用Atom文本編輯器和Chrome開發(fā)者工具。

也就是說，畫面上的每一條曲線和漸變、每一處高光和陰影、每一根頭發(fā)和睫毛、每一片蕾絲和褶皺，都是一行行代碼從頭敲出來的！

如此精細(xì)程度和創(chuàng)造力，讓學(xué)美術(shù)的網(wǎng)友感嘆“學(xué)畫畫不如寫代碼”，讓學(xué)計(jì)算機(jī)的同學(xué)覺得“別人寫的這么藝術(shù)，一定是我的教科書打開方式不對”。

真·交叉學(xué)科大佬。

它們的作者，是灣區(qū)前端大神Diana Smith小姐姐，她目前是企業(yè)及軟件開發(fā)商Atlassian的一名資深Web開發(fā)。

繪制過程

Diana在專門討論CSS的網(wǎng)站CSS-Tricks寫下了詳細(xì)的教程。

畫出這樣一個(gè)圖形分成幾步？

如果不用CSS，一般都是直接嵌入這個(gè)特殊的圖形。

如果用CSS，那么就從黑色矩形開始，然后在兩側(cè)加上上兩個(gè)

與白色背景顏色匹配的邊框半徑元素。

先畫出一個(gè)黑色矩形，然后兩邊用圓弧遮擋。有了基礎(chǔ)形狀后，下一步就是給它添上漸變的背景。但是如果用矩形方式填充，得到的效果就是這樣的：

Diana的辦法是：在保留矩形的同時(shí)，加上兩個(gè)彎曲的div，把凹進(jìn)去的部分也填充上。

最后完整的代碼是這樣的：

div{
  width: 500px;
  height: 350px;
  background: #000;
  position: relative;

  &::after, &::before{
    width: 20%;
    height: 100%;    
    position: absolute;
    top: 0;
    z-index:2;
    content: "";    

    background: #1e5799; 
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); 
  }

  &::after{
    border-radius: 100% 0% 0% 100%;   
    right: 0;
  }

  &::before{
    border-radius: 0 100% 100% 0;   
    left: 0;
  }   
}

body{
  background: #1e5799; 
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); 
}

你也可以去這個(gè)完成查看CSS樣式的實(shí)際運(yùn)行效果：

https://codepen.io/jean-jordan/pen/KeKaBw

剛剛我們畫的那幅畫像不像人的脖子？好的，我們再回到人像畫上，Diana繪制人物的脖子也是類似的過程。

在上面這張圖里，我們看到了Diana如何逐步改形狀，最終得到了油畫中人物的脖子。

但是僅僅會畫各種幾何形狀，是無法生成藝術(shù)品的，Diana總結(jié)了她在繪圖中的5個(gè)重要CSS屬性。

1、邊界半徑（border-radius）

邊界半徑是為了讓矩形的邊角過渡得更自然，對于大多數(shù)網(wǎng)頁開發(fā)者來說，只需一個(gè)參數(shù)border-radius，可以設(shè)定不同的半徑數(shù)值。

border-radius: 15px 10px 40px 30px / 40px 10px 15px 30px;

2、盒子陰影（box-shadow）

對多個(gè)盒子陰影進(jìn)行分層是增加深度的最佳方法之一。框陰影將粘附到html容器的邊緣，也會沿著邊界半徑定義的邊緣。

box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;

開發(fā)者可以指定模糊半徑，以及陰影是向內(nèi)延伸還是向外延伸。

3、變形（transform）

變形的主要方式有：旋轉(zhuǎn)（rotate）、縮放（scale）和傾斜（skew）

transform: rotate(-45deg)
transform: scale(0.7, 1.3)
transform: skew(25deg, 30deg);

此外還有透視，讓物體產(chǎn)生遠(yuǎn)小近大的視覺效果，或者是僅僅為畫出一個(gè)梯形。

transform: perspective(10px) rotateY(5deg);

4、線性梯度（linear-gradient）和徑向梯度（radial-gradient）

線性梯度用于定義一個(gè)方向上的漸變效果，徑向梯度用于定義圓和橢圓形的漸變效果

background-image: linear-gradient(0deg, blue, transparent 60%),
radial-gradient(circle at 70% 30%, purple, transparent 40%);

5、層疊（overflow）

層疊是一種將大量雜亂元素填充到一個(gè)整齊的包中的方法，可以創(chuàng)建一些有趣的形狀。在變形那部分的基礎(chǔ)上使用hidden參數(shù)，可以把邊緣遮蓋起來。

overflow: hidden;

以上5種元素缺一不可，隨便少一種都會產(chǎn)生怪異的效果。

△從左至右分別是缺少邊界半徑、陰影、變形、梯度、層疊的效果（點(diǎn)擊查看大圖）

不過即使這樣，也很有抽象藝術(shù)的美感，仿佛在看畢加索的作品。

只適用于Chrome

不過，由于這是一個(gè)純個(gè)人藝術(shù)創(chuàng)作，Diana小姐姐并不關(guān)心瀏覽器適配性。

因此，這些代碼在Chrome里可以完美展現(xiàn)，但如果用其他瀏覽器打開，可能就會出現(xiàn)不一樣的效果。

比如，MAC上的Safari瀏覽器打開，妹子的眼睛就方了：

肩膀上的高光，變成了一個(gè)大圈圈：

胸前的禮服上，也被潑了一道墨：

如果用早期的Chrome打開，會出現(xiàn)驚悚的頭身分離的效果：

早期的Opera瀏覽器，打開之后臉方了：

Windows 7上從IE 6到IE 11，顯示出來的都是這個(gè)鬼樣子：

濃重的線條，甚至有點(diǎn)抽象藝術(shù)的感覺。

同樣是早期IE，放到Mac上也一樣鬼畜，這是IE 5.1.7的效果：

還有人試了試，在Windows 98系統(tǒng)的IE 7瀏覽器打開，會變成非常像素風(fēng)的樣子：

最恐怖的是三星手機(jī)上的夜間模式打開：

連人種都變了啊！

其他的幾張畫，換個(gè)瀏覽器打開也比較鬼畜。

妹子你bra里的鋼圈出來了啊！

拉夫領(lǐng)變得透明而有光澤，領(lǐng)口的蕾絲干脆斷掉了，仿佛是逃難時(shí)期的肖像畫。

最后，如果你在iPhone上裝了Chrome，出來的也是Safari的效果，想看完整效果的話，請?jiān)诎沧渴謾C(jī)或者電腦的Chrome上打開。

因此，有不少網(wǎng)友都覺得，這幾幅畫可以當(dāng)成瀏覽器測試項(xiàng)目，一試就能知道內(nèi)核用的是誰家的。

反向繪圖

CSS太難，學(xué)不會？不要緊，雖然我們不能把代碼變成圖片，但是可以把圖片變成代碼啊。

沒錯(cuò)，就是ASCII藝術(shù)，早在DOS時(shí)期，就有人用命令行界面來顯示圖片。直到今天已成為一種流行的互聯(lián)網(wǎng)文化。

用單色字符來畫出世界名畫已經(jīng)不算新鮮事。最近又有個(gè)碼農(nóng)開發(fā)了一個(gè)新的項(xiàng)目Primg，讓任何一幅畫都可以用質(zhì)數(shù)來表示。

比如蒙拉麗莎，就可以用一個(gè)3萬位的質(zhì)數(shù)二進(jìn)制方式繪制出來。

傳送門：

作者的GitHub：https://github.com/cyanharlow

作者博客主頁：https://diana-adrianne.com/

教程：https://css-tricks.com/solving-lifes-problems-with-css/

用質(zhì)數(shù)生成任意ASCII藝術(shù)：https://github.com/geonnave/primg

— 完 —

量子位 QbitAI · 頭條號簽約作者

關(guān)注我們，第一時(shí)間獲知前沿科技動(dòng)態(tài)

擊上方藍(lán)字關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識，搞懂一個(gè)問題！

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

一、可以少寫分號的代碼

知道了這個(gè)事實(shí)之后，我們來看一段簡單的代碼：

alert('hello')
alert('world')
alert('!')

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

alert('hello');
alert('world');
alert('!');

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

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

看下面這段判斷語句：

if(a==b)
alert('true')
alert('false')

這段代碼會按照if控制結(jié)構(gòu)被解釋成下面這樣：

if(a==b){
alert('true!')
}
alert('false')

最后的總結(jié)：

總結(jié)就是一句話：無論在什么情況下都要使用分號和花括號。減少分號帶來的風(fēng)險(xiǎn)。

在線咨詢

上一篇：說說overflow- hidden的作用
下一篇：SMTP協(xié)議解讀以及如何使用SMTP協(xié)議發(fā)送電子郵件

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商