何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景…

单纯通过CSS我们就可以实现页面的形状样式。CSS绘制的形状随着屏幕分辨率的提高不会出现变形失真的问题，值得推荐。 这种方法利用的是border形成直角三角形，缺点是因为border不能形成渐变色，不适用于背景渐变色的梯形。

循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总…

这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。 border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个…

以下技巧的具体原理和解释请支持张老师的《CSS世界》，在这里不做展开。 一部分没录入的技巧原因是部分属性将被标准废弃，如：clip。还有一部分是因为个人觉得兼容性不好，而且CSS3的一些特性可以弥补，比如text-align:justify;，完全可以用flex布局实现。 应网…

当下已经有很多工具或者是软件，在努力实现从设计稿到原型稿的转换。但是到目前我还没有看到，哪一家可以挺起胸膛说，我们这个可以 100% 的实现这个需求。 是什么阻止了这两个视觉上几乎一样的稿子之间的转换呢？在我看来，是因为它们之间的物理逻辑不一样。简单的说，要实现从设计稿到原型稿…

可以点击查看 在线演示，以及 完整代码。 首先，需要了解 CSS3 的 transform ，用 transform 进行元素的变换，这是实现的关键。 实际上，上面的写法可以算作 CSS 提供的语法糖。了解计算机图形学的同学可能知道，计算机完成图像变换实际上使用的实现是矩阵。 …

某个月黑风高的夜晚，前端小白菜收到一个任务：做一张像王者荣耀登录界面一样的图片。 对面的猪八戒也太讨厌了！ --沉迷游戏两小时以后，小白菜如是说到。 接下来的任务，就是让这两只猪随着我们的猪蹄鼠标轻轻点击动起来。 根据我们想要得到的图片与鼠标之间的交互效果，为了方便计算，以图片…

这个响应式瀑布流误打误撞写出来的，因为之前看百度写过瀑布流，不太好，好复杂，又要JS什么的，我就懒，算了算了，不写了。 然后今天早上就看完数据结构教程，无聊，顺便看慕课网的瀑布流教程，发现一般般，不过学到了用columns，然后又谷歌到了 break-inside 额，发现很O…