为了使大家看清楚。我设了黑底，理论上如果切图的话是透明底PNG。 实现长方形和颜色渐变background: linear-gradient(90deg, transparent 15%, #fff);后，使其旋转transform: rotate(?deg);。多出来的部分会…

时间过得真快，转眼间现在是2017年最后一个星期，而今天也是圣诞节，过几天也是元旦了。每到年底，大家都习惯总结和分享，我也不例外。但是经历，我之前已经发过了，那么我今天就分享吧！把我接触的一些资源分享给大家，算是送给大家的双旦礼物吧！希望大家能够从中获取自己所需的资源。从我接触…

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

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

1. opacity 2. visibility 3. display 是真正意义上的隐藏元素。 4. hidden HTML5新增的hidden属性，可以直接隐藏元素。 跟display表现一致。 5. position 6. clip-path 通过裁剪元素来实现隐藏。 7…

看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添加四个div来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。难道就没有更好的解决方案了... 就在我绞尽脑汁的时候，灵光…

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

比如下图中，有的列表项的文字短，有的文字长。 需求是：希望文字长的部分能通过动画滚动显示。 我的第一反应是用纯 CSS 做不了。 其中涉及了一些有趣 CSS 知识点，在这里分享一下。 1. 如何让文字溢出容器？ work-break 属性是用来处理文字如何换行的，这里使用了不太…

从事web前端的人很多，每个人的学习方式，学习习惯基本不会一模一样！关于web前端（或者直接互联网），大家都知道，是做到老，学到老的一个行业。之前写文章的时候，我说过很多学习的方式和建议。今天换一下，说一下我个人不建议的学习方式，或者我个人觉得是妨碍进步的学习方式，希望大家引以…