CSS3实现京东图片鼠标滑过流光效果

京东首页从1F开始,左侧大图都有一个很有意思的效果,当你的鼠标滑过图片时,会有一层质感很强的流光从左侧不可见位置滑动到右侧不可见位置的效果。相较于淘宝的蒙版效果,个人感觉流光效果更好看一些。因此,本站一些图片也采用了这种流光效果,具体可鼠标滑过博文封面图预览。

流光效果实现起来很简单,主要是利用css3的线性渐变(linear-gradient),2D转换(transform)以及倾斜(skew)配合hover来实现,当然如果想要兼容一些低版本浏览器,可以使用图片代替。因此,结构相对简单,只需要一个图片父容器(.image-light),图片容器(img),以及流光容器(:before:after或其他子标签)。

从网易与淘宝的font-size思考前端设计稿与工作流

偶然间发现这篇文章,可以说,这是我见到的对移动rem单位做的最详细,最细心的一篇总结性文章,果断转载至本博客,以便有需要的同志们研究。

本文结合作者(流云诸葛)对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值。