iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
今天偶然看到这样一类很有意思的**文字快闪动画**：  这类文字快闪切换效果运用得当的话，能比较好的吸引用户的眼球。 当然，今天并非是想用 CSS 实现上述的的效果。在尝试的过程中，我发现了另外一类能够使用 CSS 非常轻松实现**文字快闪动画**，运用了`blur()` 滤镜和 `contrast()` 滤镜产生的融合效果，类似于这样：  这个技巧也在多篇文章就提及，本文再简述下。 ## blur 滤镜混合 contrast 滤镜产生融合效果 本文的重点，**模糊滤镜叠加对比度滤镜产生的融合效果**。单独将两个滤镜拿出来，它们的作用分别是： 1. `filter: blur()`： 给图像设置高斯模糊效果。 2. `filter: contrast()`： 调整图像的对比度。 但是，当他们“合体”的时候，产生了奇妙的融合现象。 先来看一个简单的例子： ...
## 背景 在上一篇 [巧用滤镜实现高级感拉满的文字快闪切换效果](https://github.com/chokcoco/iCSS/issues/149) 中，我们提到了一种非常有意思的之前苹果展示文字的动画效果。 本文，会带来另外一个有意思的效果，巧用渐变实现高级感拉满的背景光动画。此效果运用在[苹果官网 iPhone 13 Pro](巧用渐变实现高级感拉满的背景光动画) 的介绍页中：  ## 实现 这个效果想利用 CSS 完全复制是比较困难的。CSS 模拟出来的光效阴影相对会 Low 一点，只能说是尽量还原。 其实每组光都基本是一样的，所以我们只需要实现其中一组，就几乎能实现了整个效果。 观察这个效果：  它的核心其实就是**角向渐变** -- `conic-gradient()`，利用角向渐变，我们可以大致实现这样一个效果： ```HTML ``` ```CSS div {...
## 背景 在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？ 本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解使用 CSS 如何尽可能的实现它们。 先让我们来看看这些经常会出现的按钮形状：  ## 矩形与圆角按钮 正常而言，我们遇到的按钮就这两种 -- 矩形和圆角：  它们非常的简单，宽高和圆角和背景色。 ```HTML rect circle ``` ```CSS .btn { margin: 8px auto; flex-shrink:...
## 背景 今天逛 CodePen，看到了这样一个非常有意思的效果：  [CodePen Demo -- Material Design Menu By Bennett Feely](https://codepen.io/bennettfeely/pen/fHdFb) 这个效果还是有一些值得探讨学习的点，下面我们一起来看看。 ## 如何实现这样一个类似的效果？ 首先，想一想，如果让你去实现上面的效果，你会怎么做呢？ 这里我简单罗列一些可能的办法： 1. 阴影 box-shadow 2. 渐变 radial-gradient 3. 缩放 transform: scale() 快速的一个一个过一下。...
## 背景 某日，群友们在群里抛出这样一个问题，如何使用 CSS 实现如下的布局：  在 CSS 世界中，如果只是下述这种效果，还是非常容易实现的：  一旦涉及到圆角或者波浪效果，难度就会提升很多。 实现这种连续平滑的曲线其实是比较麻烦的，当然，也不是完全没有办法。本文，就会带大家看看，使用 CSS 实现上述内凹平滑圆角效果的一些可能的方式。 ## 利用圆的衔接实现 第一种方法比较笨。我们可以使用多个圆的衔接实现。 首先，我们会实现一个内部挖出一个矩形的矩形： ```HTML ``` 核心 CSS 代码如下： ```CSS div { height: 200px; background: linear-gradient(90deg,...
最近利用 CSS 实现了一些看似超出 CSS 能力的效果： + [巧用渐变实现高级感拉满的背景光动画](https://github.com/chokcoco/iCSS/issues/150) + [Amazing！！CSS 也能实现极光？](https://github.com/chokcoco/iCSS/issues/155) 本文继续此系列，本文主要想探讨一下，使用 CSS 能否比较好的实现一些**烟雾效果**。像是这样：  仔细观察烟雾效果，有两个比较重要的特点： + 模糊效果 + 颗粒感 首先看模糊效果，想到模糊，大部分同学首先都会想到使用 `filter: blur()` 。 当然没错，不过在 CSS 中，除了滤镜，我们还能使用一类其他手段去模拟**模糊**的效果。 ## 纯 CSS 实现烟雾动画...
最近，我们内部的一个低代码平台完工上线，它的首页大概是这样子（数据脱敏）：  当然，这个不是项目不是本文的重点。主要看看这个页面的背景，一个磨砂（毛玻璃）质感效果的渐变背景图，看上去是比较高级的。 剥离掉页面的内容元素，只剩下背景的话，大概是这样：  一开始是打算切图实现的，但是仔细一想，这个效果使用 CSS 其实也可以非常轻松制作出来。本文就讨论讨论： 1. 使用 CSS 如何制作如上所示磨砂（毛玻璃）质感效果的渐变背景图 2. 如何借助 CSS-doodle 工具，批量产生该效果图，并且附带动画效果 ## 实现渐变图 上述背景效果看似复杂，其实非常的简单。它就是： **多块不规则渐变背景** + **高斯模糊蒙版** 在 CSS 中，也就是借助 `background` + `backdrop-filter: blur()` 即可实现。...
有群友问我，使用 CSS 如何实现如下 Loading 效果：  这是一个非常有意思的问题。 我们知道，使用 CSS，我们可以非常轻松的实现这样一个动画效果： ```HTML ``` ```CSS div { width: 100px; height: 100px; border-radius: 50%; border: 2px solid transparent; border-top: 2px solid #000; border-left: 2px...
在我们的页面中，经常会出现这样的问题，一块区域内的文本或者边框，在展示的时候，变得特别的模糊，如下(数据经过脱敏处理)：  正常而言，应该是这样的：  emmm，可能大图不是很明显，我们取一细节对比，就非常直观了：  ## 何时触发这种现象？ 那么？什么时候会触发这种问题呢？在 Google 上，其实我们能搜到非常多类似的案例，总结而言： 1. **当文本元素的某个祖先容器存在 `transform: translate()` 或者 `transform: scale()` 等 `transform` 操作时，容易出现这种问题** 当然，这只是必要条件，不是充分条件。继续深入探究，会发现，必须还得同时满足一些其它条件： 2. **元素作用了 `transform: translate()` 或者 `transform: scale()` 后的计算值产生了非整数**...
在 Web 动画方面，有一套非常经典的原则 -- [Twelve basic principles of animation](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation)，也就是关于动画的 12 个基本原则（也称之为迪士尼动画原则），网上对它的解读延伸的文章也非常之多： + [Animation Principles for the Web](https://cssanimation.rocks/principles/) + [[译文]网页动画的十二原则](https://cssanimation.rocks/cn/principles/) 其中使用的示例 DEMO 属于比较简单易懂，但是没有很好地体现在实际生产中应该如何灵活运用。今天本文将带大家再次复习复习，并且替换其中的最基本的 DEMO，换成一些到今天非常实用，非常酷炫的动画 DEMO 效果。 ## Squash and stretch --...