导语 文章来源于最近解决的一个需求，让一段文案的尾行渐变消失，解决的时候了解到了很多新的知识点，所以记录下来。 问题描述 最近在做H5的页面的时候，遇到了这样的一个需求： 在一个展示信息的页面，为了提

为什么会有Lottie动画呢？在前端程序员根据UI视觉稿实现页面效果时一直存在这样的一种“矛盾” - 动画效果更完美与工期成本的矛盾。

CSS 大约有两百个属性。很多属性都是相互关联的，理清楚每一个属性细节是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考...

我们在网页加载的时候总会加上一些过渡效果来引导用户，减少白屏时间，而加载的效果可以用svg也可以使用一些我们封装好的组件,今天就...

1. Lottie 介绍 Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接…

今天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。 我们都知道，到今天（2020/03/06），CSS 提供了两种方式便于我们进行文本超长的打点省略。 基于上述的超长打点省略方案之下，会有一些变化的需求。譬如，我们有如下结构： 对于上述超出的情况，我们希望对于超…

前段时间笔者收到可爱漂亮的小册姐姐的邀请，做了人生首次直播分享。分享主题是《玩转CSS的艺术之美》，跟笔者在9月底发布的掘金小册同名。 9月底发布的玩转CSS的艺术之美，首日预售就达到709本，预售仅三日就破1000本。这也让笔者感到惊讶，没想到CSS技术还是那么受倔友们的欢迎…

1. 文字超出部分显示省略号 2. 文字垂直居中 3. 首行缩进 4. 首字下沉 5. 中英文自动换行 6. 文字阴影 text-shadow 为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。 X-offset:指阴影居于字体水平偏移的位置。 Y-offs…

在大多数需求中，css3 的 transition / animation 都能满足我们的需求，并且相对于 js 实现，可以大大提升我们的开发效率，降低开发成本。 它的值是一个数列，数与数之间用逗号或者空白隔开，指定短划线(50px)和缺口(50px)的长度。 设置 strok…