软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

聊聊双11互动主玩法中前端技术亮点

在上一篇《手淘Web页面Bar和纵向适配的设计》中聊了互动项目中Bar的工业化标准设计以及对刘海设备带来的变化。我把这一点称为标准化Bar设计给适配带来的优势。今天这篇文章中主要想再花点时间聊聊今年手淘“PK赢能量”互动项目中前端有哪些技术亮点和尝鲜。当然文章涉及到的技术点估计有很多同学都有接触或者使用过。毕竟CSS仅仅是一门表现层语言。废话不多说,直接进入主题吧!

面对场景

估计有很多同学已经参与“PK赢能量”互动游戏中,但还是花一点点时间聊一下技术面对的场景(指的是CSSer),这样更好开始讲述我们今天的故事。

大家不难发现,为了营造双十一过节的氛围,设计往往都是非常热情,奔放的。颜色多,颜色艳等等。这对于Web开发人员是件头痛的事情,为什么头痛呢?比如一个开发面对这些场景时:

边框是渐变的都算了,还是七彩的,还是七彩的,想哭!

上图的场景相对而言比第一张要简单多了,但对于带阴影的Tooltips,还是令人生畏的,特别还是带渐变的三角。

一个破提示框,除了带阴影都算了,小三角还是不规则的!昵玛,不规则都算了,还有渐变!还让不让前端活!估计此时前端对视觉设计师应该是这样的:

其实前端对视觉还是很有爱的,因为前端耐操。

既然都这么皮实了,那就再撸一发,顺便用代码把下面的也解了:

图片能省就省嘛,这些都是钱!说不定老板一高兴,给你加薪晋级!

其实我们是一群有追求的人,越难的事情,对我们来说越具挑战性,越有那么一种冲动。

谁说不是呢?这叫作!人家说不作死不会死!

其实类似上面的场景,对于互动团队的同学而言是家常便饭,见怪不怪了!而往往面对这样的场景,大家第一意识形态就是我用图片解决一切!现在谁还差那么一点带宽呢?包个月,几十G来了,解决一切!

谁说不是呢?但很多时候用图片也有用图片难处:

难适应产品多变的需求难扩展,总不可能备好成千上万种尺寸的图吧难维护,这么多图,哪是用哪浪费资源影响性能等等... 想到了再继续加

我还是想打破一下规矩,借着双十一大促的活动来验证一些技术点。因为:

** 扛得住双十一的,还有什么不能扛呢?以后可以说,咱绝对耐操!**

渐变边框

我把七彩的边框称为渐变边框,这样显得更为专业一点。通过设计图,不难发现,边框采用了渐变颜色,如下图所示:

对CSS了解的同学,要实现类似这样的渐变边框效果,首先会想的是CSS的 border-image 属性。的确如此,我首先想的也是该属性,而且该属性可以很容易实现类似的效果,比如:

.gradient-border{    border: 5px solid transparent;    border-image: linear-gradient(to bottom, #0099CC, #F27280);    border-image-slice: 1;}

效果如下:

虽然border-imagelinear-gradient()配合在一起,能实现渐变的边框效果,但它也有一定的缺陷性,比如我们项目中的按钮是带圆角的。那么对于这种情形,就算是你使用了border-radius也是无用:

这是因为border-image中引用的是一张不带圆角的图片(linear-gradient()就相当于一张背景图)。也就是说,如果你需要一个带圆角的渐变边框,那么使用border-image是有局限性的,除非人肉为其准备带圆的背景图,或者有更好的办法通过代码绘制一个带圆角的背景图~

此路似乎在这个项目中行不通,只能考虑换用别的方法。仔细一想,我可以把带有渐变边框的元素分成两层:

这样一来似乎要容易的多了,一层一个元素:

<div class="gradient-border">    <div class="content"></div></div>

甚至我们还可以通过伪元素::before::after来模拟一个层。比如下面这个示例:

.gradient-border {    --borderWidth: 5px;    border-radius: var(--borderWidth);    background: #fff;    &::before {        content: '';        position: absolute;        top: calc(-1 * var(--borderWidth));        left: calc(-1 * var(--borderWidth));        height: calc(100% + var(--borderWidth) * 2);        width: calc(100% + var(--borderWidth) * 2);        background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);        border-radius: calc(2 * var(--borderWidth));        z-index: -1;    }}

效果如下:

是不是感觉越来越接近设计稿了:

加个元素或加个伪元素总是那么的不舒服,那怎么办呢?有没有更好的方案。其实CSS的世界是很有魅力的,只要你敢去想,有很多东西你意想不到。

既然可以分成元素层让两个渐变或两张图叠加在一起做一个差值,从而实现效果。那么为什么不可以直接在背景中采用两个层(两张背景图)叠加在一起。

这是一个很好的方案,也是一个大胆的思路。到目前为止,CSS的多背景方案已经是一个很成熟的技术方案。这样一来,咱们就可以在