作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可…

第五届CSS大会上做了主题为“CSS创意与视觉表现”的分享，介绍10个纯CSS实现的创意案例。分享PPT下载： 第4届中国前端开发者千人峰会上做了名为“滤镜与混合模式”主题分享。分享PPT下载： 希望对大家学习有所帮助。

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 1、交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将

Inkstone 是一个面向海外原创作家和翻译的创作平台。大量的作家和作品，意味着大量的书封制作需求。这之前是需要设计师投入精力，或者花钱购买来解决的，淘宝的 5 元书封，说便宜也不便宜，和用户自己上传的书封一样，不保证版权方面没有问题，存在着各种风险。而此时浏览器端书封制作系…

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

事情是这样的，前天上午产品经理说想要做一个心愿墙，问我能不能行 我心想，这太容易了，但为了多摸一天鱼，我说还是有点挑战的 结果下午，产品经理和设计师就给我发来了设计参考 他们说，心愿墙的设计大致是这样

在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下 首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下 这里的遮罩图…

发挥你的想象，CSS也能实现拖拽效果。 这类效果用JS可以很容易实现，无非就是多了一些计算，多考虑了一些临界场景，然后代码量也多了一些。不过，经过我的一番脑洞，发现CSS也能几乎实现这一效果，接着往下看。 在传统 web 中，页面滚动是一个很常见交互，操作上就是利用鼠标滚轮或者…

他并没有多震撼多酷炫， 那些花里胡哨的都没有，能形容的只有两个词：用心 细腻。网易云真的很用心，只要在 app 内部搜索【年度总结】你依然能看到自己的年度总结，在看到那首深夜还在听的歌，听过最多的歌词等瞬间，你是否回想起那个你爱过的女孩，是否能激起心里的涟漪。 1. 第二屏 概…