整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

京东商家店铺中秋banner海报CSS动态特效

京东商家店铺中秋banner海报CSS动态特效

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

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

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权限在京东是免费的,而在天猫是需要购买的!

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

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

查 郭一璞 发自 凹非寺
量子位 报道 | 公众号 QbitAI

HTML不是编程语言,但这并不妨碍精通它的大佬玩出花来。

普通的前端,用HTML+CSS制作网页,元素简单,工具丰富。

大佬级前端,用HTML+CSS绘画,全程不用PS、AI这种图形化的图片编辑器,单纯敲一行行代码纯手工绘制。

把代码转换之后,就变成了鲜嫩的水果:

或者画出洛可可风格的古典女性肖像:

还有弗拉芒巴洛克肖像风格的人物画像,充满了中世纪的禁欲感:

现代的也有,比如这位在粉色灯光下的着礼服的妹子:

以及充满者50年代气息的复古风人物海报:

曲线、光影、渐变,每个元素都相当复杂。

而且,创作过程中不用SVG,只用Atom文本编辑器和Chrome开发者工具。

也就是说,画面上的每一条曲线和渐变、每一处高光和阴影、每一根头发和睫毛、每一片蕾丝和褶皱,都是一行行代码从头敲出来的!

如此精细程度和创造力,让学美术的网友感叹“学画画不如写代码”,让学计算机的同学觉得“别人写的这么艺术,一定是我的教科书打开方式不对”。

真·交叉学科大佬。

它们的作者,是湾区前端大神Diana Smith小姐姐,她目前是企业及软件开发商Atlassian的一名资深Web开发。

绘制过程

Diana在专门讨论CSS的网站CSS-Tricks写下了详细的教程。

画出这样一个图形分成几步?

如果不用CSS,一般都是直接嵌入这个特殊的图形。

如果用CSS,那么就从黑色矩形开始,然后在两侧加上上两个

与白色背景颜色匹配的边框半径元素。



先画出一个黑色矩形,然后两边用圆弧遮挡。有了基础形状后,下一步就是给它添上渐变的背景。但是如果用矩形方式填充,得到的效果就是这样的:

Diana的办法是:在保留矩形的同时,加上两个弯曲的div,把凹进去的部分也填充上。

最后完整的代码是这样的:

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

你也可以去这个完成查看CSS样式的实际运行效果:

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

刚刚我们画的那幅画像不像人的脖子?好的,我们再回到人像画上,Diana绘制人物的脖子也是类似的过程。

在上面这张图里,我们看到了Diana如何逐步改形状,最终得到了油画中人物的脖子。

但是仅仅会画各种几何形状,是无法生成艺术品的,Diana总结了她在绘图中的5个重要CSS属性。

1、边界半径(border-radius)

边界半径是为了让矩形的边角过渡得更自然,对于大多数网页开发者来说,只需一个参数border-radius,可以设定不同的半径数值。

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

2、盒子阴影(box-shadow)

对多个盒子阴影进行分层是增加深度的最佳方法之一。框阴影将粘附到html容器的边缘,也会沿着边界半径定义的边缘。

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

开发者可以指定模糊半径,以及阴影是向内延伸还是向外延伸。

3、变形(transform)

变形的主要方式有:旋转(rotate)、缩放(scale)和倾斜(skew)

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

此外还有透视,让物体产生远小近大的视觉效果,或者是仅仅为画出一个梯形。

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

4、线性梯度(linear-gradient)和径向梯度(radial-gradient)

线性梯度用于定义一个方向上的渐变效果,径向梯度用于定义圆和椭圆形的渐变效果

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

5、层叠(overflow)

层叠是一种将大量杂乱元素填充到一个整齐的包中的方法,可以创建一些有趣的形状。在变形那部分的基础上使用hidden参数,可以把边缘遮盖起来。

overflow: hidden;

以上5种元素缺一不可,随便少一种都会产生怪异的效果。

从左至右分别是缺少边界半径、阴影、变形、梯度、层叠的效果(点击查看大图)

不过即使这样,也很有抽象艺术的美感,仿佛在看毕加索的作品。

只适用于Chrome

不过,由于这是一个纯个人艺术创作,Diana小姐姐并不关心浏览器适配性。

因此,这些代码在Chrome里可以完美展现,但如果用其他浏览器打开,可能就会出现不一样的效果。

比如,MAC上的Safari浏览器打开,妹子的眼睛就方了:

肩膀上的高光,变成了一个大圈圈:

胸前的礼服上,也被泼了一道墨:

如果用早期的Chrome打开,会出现惊悚的头身分离的效果:

早期的Opera浏览器,打开之后脸方了:

Windows 7上从IE 6到IE 11,显示出来的都是这个鬼样子:

浓重的线条,甚至有点抽象艺术的感觉。

同样是早期IE,放到Mac上也一样鬼畜,这是IE 5.1.7的效果:

还有人试了试,在Windows 98系统的IE 7浏览器打开,会变成非常像素风的样子:

最恐怖的是三星手机上的夜间模式打开:

连人种都变了啊!

其他的几张画,换个浏览器打开也比较鬼畜。

妹子你bra里的钢圈出来了啊!

拉夫领变得透明而有光泽,领口的蕾丝干脆断掉了,仿佛是逃难时期的肖像画。

最后,如果你在iPhone上装了Chrome,出来的也是Safari的效果,想看完整效果的话,请在安卓手机或者电脑的Chrome上打开。

因此,有不少网友都觉得,这几幅画可以当成浏览器测试项目,一试就能知道内核用的是谁家的。

反向绘图

CSS太难,学不会?不要紧,虽然我们不能把代码变成图片,但是可以把图片变成代码啊。

没错,就是ASCII艺术,早在DOS时期,就有人用命令行界面来显示图片。直到今天已成为一种流行的互联网文化。

用单色字符来画出世界名画已经不算新鲜事。最近又有个码农开发了一个新的项目Primg,让任何一幅画都可以用质数来表示。

比如蒙拉丽莎,就可以用一个3万位的质数二进制方式绘制出来。

传送门:

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

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

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

用质数生成任意ASCII艺术:https://github.com/geonnave/primg

— 完 —

量子位 QbitAI · 头条号签约作者

关注我们,第一时间获知前沿科技动态

击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

在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')

最后的总结:

总结就是一句话:无论在什么情况下都要使用分号和花括号。减少分号带来的风险。