因为 button 元素可以使用 before/after 伪元素，所以借助伪元素，可以实现动态图中的遮盖层。 为了避免回流重绘，滑箱的运动方向是垂直方向，所以使用scaleY属性。对于动画的方向，需要借助transform-origin改变动画原点。 果冻特效可以分割成 5 …

... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等，你真的能分清这些概念的意义吗？ 本文将从移动端适配的基础…

一、CSS写自适应大小的正方形代码：效果图：原理：元素的padding的百分比值四个值均根据当前元素的宽度来计算的padding只能取top或者bottom，自适应正方形其值要和宽一致，当然其他不同比

这是个老掉牙的需求啦，不过仍然有很多人在网上找解决方案，特别是搜索结果排名靠前的那些，都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案。 如果你看到这篇文章，可能代表你正是从那么多千篇一律的文章中跳转过来的，想找更好地方案的。那恭喜你，没有更好的，只有更…

使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。 为了容易理解，文章分为基本形状 和 组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。 心形是由两个圆…

布局和样式，是每个前端的必修课。在日常的工作中，也会碰到一些特定场景的布局需求，配合上样式，就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局，以及浏览各大网站时碰巧发现的神奇特效写法，在此做个分享。 由于篇幅原因，会分为 2 篇。今天，会先介绍一些有趣而又实用的布局的写…

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。 鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。 需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。 另外这里，老姚谢谢各位一如既往的支…

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 正文现在开始。 1. 建议使用 padding 代替 margin 我们在设计稿还原的时候，padding 和 margin 两个是常用的属性，但我们…

CSS是一种独特的语言。乍一看，这似乎很简单,但是，某些在理论上看起来很简单的效果在实践中往往不那么明显。 在本文中，我将分享一些有用的技巧和技巧，它们代表了我在学习CSS过程中的关键进展。本文并不是要演示CSS可以变得多么复杂。相反，它分享了一些在大多数CSS教程中不太可能找…