聊聊双11互动主玩法中前端技术亮点
特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在上一篇《手淘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-image
和linear-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的多背景方案已经是一个很成熟的技术方案。这样一来,咱们就可以在
如需转载,烦请注明出处:https://www.w3cplus.com/css/techniques-for-using-CSS-in-the-double-11-project.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!