高階切圖技巧！基於單張圖片的任意顏色轉換
- 2022 年 7 月 11 日
- 筆記
今天，要介绍一种基于 CSS mask-composite 的高级技巧。 通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。 通过单张 PNG/SVG 得到它的反向切图 事情的经过是这样的，某天，我们拿到了这样一张 PNG/SVG 图片： 就这张图片而言，它是 …
Continue ReadingLPL Ban/Pick 選人階段的遮罩效果是如何實現的？
- 2022 年 2 月 15 日
- 筆記
最近 S11 LPL 春季赛开赛，在看比赛的过程中，我发现新赛季的 Ban/Pick 选人阶段，出现了一种新的，有意思的遮罩效果，如下图所示： 当然，它是一个动态的效果，当选人的过程中，会有一种呼吸的效果： Gif 图有点糊，总的而言，就是一种接近迷雾的遮罩效果。并且，他是能够动态变化的。 本文将探 …
Continue Reading妙用濾鏡構建高級感拉滿的磨砂玻璃漸變背景
- 2022 年 1 月 26 日
- 筆記
最近，我们内部的一个低代码平台完工上线，它的首页大概是这样子（数据脱敏）： 当然，这个不是项目不是本文的重点。主要看看这个页面的背景，一个磨砂（毛玻璃）质感效果的渐变背景图，看上去是比较高级的。 剥离掉页面的内容元素，只剩下背景的话，大概是这样： 一开始是打算切图实现的，但是仔细一想，这个效果使用 …
Continue Reading神奇的濾鏡！巧妙實現內凹的平滑圓角
- 2022 年 1 月 7 日
- 筆記
背景 某日，群友们在群里抛出这样一个问题，如何使用 CSS 实现如下的布局： 在 CSS 世界中，如果只是下述这种效果，还是非常容易实现的： 一旦涉及到圆角或者波浪效果，难度就会提升很多。 实现这种连续平滑的曲线其实是比较麻烦的，当然，也不是完全没有办法。本文，就会带大家看看，使用 CSS 实现上述 …
Continue Reading
Amazing！！CSS 也能實現煙霧效果？
- 2021 年 12 月 28 日
- 筆記
最近利用 CSS 实现了一些看似超出 CSS 能力的效果： 巧用渐变实现高级感拉满的背景光动画 Amazing！！CSS 也能实现极光？ 本文继续此系列，本文主要想探讨一下，使用 CSS 能否比较好的实现一些 烟雾效果 。像是这样： 仔细观察烟雾效果，有两个比较重要的特点： 模糊效果 颗粒感 首先看 …
Continue ReadingAmazing！！CSS 也能實現極光？
- 2021 年 12 月 23 日
- 筆記
在上次写完这篇文章 -- 巧用渐变实现高级感拉满的背景光动画 之后，文章下面的评论有同学留言， 使用 CSS 可以实现极光吗 ？ 像是这样： emmm，这有点难为人了。不过，最近我也尝试着去试了下，虽然不可能模拟出那么真实的效果，但是使用 CSS 还是可以作出类似的一些特效的，今天我们就一起来尝试下 …
Continue Reading利用 clip-path 實現動態區域裁剪
- 2021 年 12 月 16 日
- 筆記
背景 今天逛 CodePen，看到了这样一个非常有意思的效果： CodePen Demo -- Material Design Menu By Bennett Feely 这个效果还是有一些值得探讨学习的点，下面我们一起来看看。 如何实现这样一个类似的效果？ 首先，想一想，如果让你去实现上面的效果， …
Continue Reading使用 CSS 輕鬆實現一些高頻出現的奇形怪狀按鈕
- 2021 年 12 月 1 日
- 筆記
背景 在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？ 本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解使用 CSS 如何尽可能的实现它们。 先让我们来看看这些经常会出现的按钮形状： 矩形与圆角按钮 正常而言，我 …
Continue Reading巧用漸變實現高級感拉滿的背景光動畫
- 2021 年 11 月 24 日
- 筆記
背景 在上一篇 巧用滤镜实现高级感拉满的文字快闪切换效果 中，我们提到了一种非常有意思的之前苹果展示文字的动画效果。 本文，会带来另外一个有意思的效果，巧用渐变实现高级感拉满的背景光动画。此效果运用在 苹果官网 iPhone 13 Pro 的介绍页中： 实现 这个效果想利用 CSS 完全复制是比较困 …
Continue Reading巧用濾鏡實現高級感拉滿的文字快閃切換效果
- 2021 年 11 月 16 日
- 筆記
今天偶然看到这样一类很有意思的 文字快闪动画 ： 这类文字快闪切换效果运用得当的话，能比较好的吸引用户的眼球。 当然，今天并非是想用 CSS 实现上述的的效果。在尝试的过程中，我发现了另外一类能够使用 CSS 非常轻松实现 文字快闪动画 ，运用了 blur() 滤镜和 contrast() 滤镜产生 …
Continue Reading