本文，将另辟蹊径，介绍一种使用滤镜去构建圆角的独特方式。 首先，我们来看这样一个图形： 一个矩形，没什么特别的，代码如下： div {     width: 200px;     height: 40px;     background-color: ...

↓推荐关注↓ 现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局，它们实现了一些非凡的工作。 01. 超级居中：place-items: center...

介绍一个 CSS 动画合成小技巧。先看效果 Kapture 2022-06-26 at 16.57.42 这是一个非常“动感”的倒计时效果，在一些活动开场中比较常见，分析一下整个动画过程，不难发现，有以下几类动画 数字的变化 ...

最近在项目中碰到一个这样的角标设计，如下 设计稿 像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完） 一、圆角矩形和三角形 从设计上可以拆分成两部分，一个圆...

本文，将另辟蹊径，介绍一种使用滤镜去构建圆角的独特方式。 首先，我们来看这样一个图形： 一个矩形，没什么特别的，代码如下： div {    width: 200px;    height: 40px;    background-color: #000;} 如果，我...

本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已...

今天，要介绍一种基于 CSS mask-composite 的高级技巧。 通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。 通过单张 PNG/SVG 得到它的反向切图 事情的经过是...

在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面这个例子，注意观察头部阴影 作家专区 可以看到，只有滚动以后才出现阴影...

偶尔在网上看到这样一个设计，当阅读量比较少时，文字呈灰色，当阅读量比较多（>=100）时，文字就变成褐色了，示意效果如下 image-20220417223953275 是不是非常醒目呢？ 另外，还有那种可以根据进度自动变...

今天，有在群里看到这样一个问题：有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧，使用 CSS 可以完成么？ 像是这样： 一个非常有意思的问题...