视频加载中...

首先，我们来分下一下，这个海报动态部分的组成部分：

1.主题和利益点的上下动态部分；

2.孔明灯飘上天的动态部分；

3.大背景切换的动态部分；

4.京东狗附在月亮图的切换动态部分。

海报的各个部分都被分割成好几个部分而独立存在，他们之间的独立相互结合在一起形成了整个整体，独立的个体利用HTML语言把他们结合起来，这就是网页设计的功能。我们平时在电商设计中，美工设计利用PS做好海报生成JPG图片，图片大了利用DW切下图，切完图，上传图片空间，添加对应链接就OK了。一些大的店铺可能都很专业，也许会有前端工程师的岗位，他们会把美工做成的图交给前端工程师，前端工程师再把图片利用css,html和JavaScript实现网页动态的功能。

也许，你以后会想开一家属于自己特点的店铺，有钱了可以把这些交给自己的前端工程师，若你经济上不允许，自己学，自己来可以，如今的网络那么发达，什么都可以学，只要你想学，什么都有。所以，你是否希望你的店铺能有别于其他的店铺吗？不仅有特效，还有视频（暂且不做介绍）。

对于电商的设计师来说，不需要懂得太多的html(网页语言)，只要懂得DIV ul li position z-index a就足够了，比如这个定位，什么时候用相对定位，什么时候用绝对定位，这个DIV的层级是多少，在那个div的上面还是下面等等。如果你想让你的店铺有更多的特效出现，那么CSS就要花点时间了，不过，这个应该不是很难，很容易懂，这个有点扯远了。

对于这张海报来说，最外面的容器是名字为movebox的div，它是父级元素，把它的位置定位为相对位置，也就是position:relatvie;那么它里面的子级元素就以绝对位置来定位，我们在CSS中看到很多的position:absolute;以绝对定位的div就结合其中的left,top,right,bottom来具体定位，这个数字是多少呢？我们可以用PS来确定具体的大小数值。

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

}

我大概翻译下这个运动的意思：如果是大神或者专业的可以忽略我的啰嗦，当这个运动在6s的0%时间里，运动的位置是0px，也就是说不动，当运动在6s的30%时间里，在y轴向上运动了5px，在6s的60%时间向上运动了10px,在6s的90%时间里向上运动了5px(也就是说从最高点回来了5px),在6s的100%时间里，也就是6秒钟的最后，回到了最初的起点。

就是这样一个格式造就了这个图形做上下来回往返运动。

其实，我们可以改下，把格式里的Y改成X，她就会做左右来回的往返运动。我们可以设想再改下，给这个运动格式添加X和Y，它会怎样的运动呢？这个格式是有的。就是这样稍微的改动它就会有另一种的表现形式，这就是CSS的魅力所在！

2.孔明灯飘上天动态部分：

这个CSS所想表达的意思就是：孔明灯突然从屋檐上出现，缓缓地放飞上天，慢慢地消失在人们的视野里。

孔明灯的图片也是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; }

}

这个格式跟上面的格式基本一样的，我想有我前面的翻译，这个小白们应该发现不会很难了吧，你们猜的不错，这个格式包含了X轴和Y轴方向上的运动，括号里面第一个是X轴方向的参数值，第二个是Y轴方向的，只不过上面只有一个属性transform(变形)，这一次有了第二个属性：opacity(透明)，1表示出现，0表示隐藏。就这样一个格式，举一反三就简单多了。

3.大背景的切换主题：

这大背景看似是两张图片的切换，如果没看到代码，不是精通的我们很难发现是怎么做的，但看了代码之后，才发现原来是这么简单。

其实它两张图片，其中有一张不用变的，只需要变第二张背景图片就可以了，也就是说对第二张图片用CSS来实现出现和隐藏的功能。

它的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.京东狗附在月亮图的切换动态部分。

.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，我们从特效的表现来看，这两个动作是反向而来的，你左我右，你上我下的意思，看参数就知道了，在同一段时间里，我们所要到的那几个地方都是一样的，只不过时间不一样，你8点在北京，我8点在上海，你19点在上海，我19点在北京，打个简单的比喻让人易于理解。

总结：这个中秋的海报设计得很有意义：中秋到了，虽然你我都身在异地，但我们在共同的节日了，共享一样的美食就如同陪在家人身边一样。

两只京东狗图片和背景图片的同时切换就衬托了天涯这个主题，第四部分的CSS特效起到了海报画龙点睛的作用。

这就是CSS的魅力所在，还好京东的商家店铺不同天猫，CSS权限在京东是免费的，而在天猫是需要购买的！

如果有需要完整代码的小伙伴欢迎在底下留言，我会把代码发给你们，喜欢的小伙伴就点一波关注吧！自媒体不容易，多谢大家的支持！

（本文所涉及到的图片，代码版权归原作者所有，不可用作商业用途，仅供学习之用）