iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样： 当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行 CSS，就能实现全站置灰的方式。 像是这样，我们仅仅需要给 HTML 添加一个统一的滤镜即可： ```CSS html { filter: grayscale(.95); -webkit-filter: grayscale(.95); } ``` 又或者，使用 SVG 滤镜，也可以快速实现网站的置灰： ```HTML // ... ``` ```CSS html { filter: url(#grayscale); } ``` 大部分时候，这样都可以解决大部分问题。不过，也有一些例外。譬如，如果我们仅仅需要置灰网站的首屏，而当用户开始滚动页面的时候，非首屏部分不需要置灰，像是如下动图所示，该怎么办呢？...
在上一篇文章中 -- [现代 CSS 之高阶图片渐隐消失术](https://github.com/chokcoco/cococss/issues/23)，我们借助了 CSS @Property 及 CSS Mask 属性，成功的实现了这样一种图片渐变消失的效果：  [CodePen Demo -- 基于 @property 和 mask 的文本渐隐消失术](https://codepen.io/Chokcoco/pen/qBKPgZY) 但是，这个效果的缺陷也非常明显，虽然借助了 SCSS 简化了非常多的代码，但是，如果我们查看编译后的 CSS 文件，会发现，在利用 SCSS 只有 80 的代码的情况下，编译后的 CSS...
最近群里有这样一个有意思的问题，大家在讨论，使用 CSS 3D 能否实现如下所示的效果：  这里的核心难点在于，如何利用 CSS 实现一个立体的数字？CSS 能做到吗？ 不是特别好实现，但是，如果仅仅只是在一定角度内，利用视觉障眼法，我们还是可以比较完美的还原上述效果的。 ## 利用距离、角度及光影构建不一样的 3D 效果 这是一种很有意思的技巧，在 [奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？](https://github.com/chokcoco/iCSS/issues/132) 我们曾经介绍过，当然，制作的过程需要比较多的调试。 合理的利用距离、角度及光影构建出不一样的 3D 效果。看看下面这个例子，只是简单是设置了三层字符，让它们在 Z 轴上相距一定的距离。 简单的伪代码如下：...
本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 + [现代 CSS 之高阶图片渐隐消失术](https://github.com/chokcoco/cococss/issues/23) + [现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！](https://github.com/chokcoco/cococss/issues/21) 在上两篇中，我们详细介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画效果的！ 在这一篇中，我们将继续探索，尝试使用 CSS Painting API，去实现一些过往纯 CSS 无法实现的效果。 ##...
本文是 CSS Houdini 之 CSS Painting API 系列第四篇。 + [现代 CSS 之高阶图片渐隐消失术](https://github.com/chokcoco/cococss/issues/23) + [现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！](https://github.com/chokcoco/cococss/issues/21) + [现代 CSS 高阶技巧，完美的波浪进度条效果！](https://github.com/chokcoco/cococss/issues/24) 在上三篇中，我们详细介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画效果的！ 在这一篇中，我们将继续探索，尝试使用 CSS Painting...
通过本文，你能了解到 4 种不一样的，使用纯 CSS 制作的渐变背景的过渡动画的方式。 有的时候，我们可能需要下面这样的动画效果，渐变背景色的过渡动画：  假设我们渐变的写法如下： ```CSS div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); } ``` 按照常规想法，配合 `animation` ，我们首先会想到在 `animation` 的步骤中通过改变颜色实现颜色渐变动画，那么我们的 CSS 代码可能是： ```CSS div { background:...
在日常布局当中，肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。 但是，有的时候，由于场景的限制，可能会出现在一些无法使用超出打点省略的方法的场景，譬如在导航栏中：  这种情况下，在容器定宽但是文本又溢出且不能换行的情况下，我们就需要寻求另外的解决方案。 ## hover 时弹出框提示 一种可行的方案是在 hover 的时候，弹出一个文本框展示全文，最简单的就是在文本标签下添加 title 属性，填充我们需要的内容： ``` 溢出文本1 溢出文本2 溢出文本3 溢出文本4 ```  当然，这种方法简单但是可能缺乏点用户体验。 ------ 本文将简单介绍在文本长度不确定，容器长度也不确定的情况下，任意长度的文本实现 hover 状态下，从左向右，滚动到文本末端，再滚动回初始位置，如此反复，像是这样：  ## 容器定宽，文本不定宽 我们先假设一下，我们的容器的宽度如果是固定的，但是不确定每条文本的宽度。 像是这样： ```HTML...
今天，有个群友问了我这么一个问题，如果不想切图，是否有办法实现带渐变边框的字体效果？如下所示：  本文，就将尝试一下，在 CSS 中，我们可以如何尽可能的实现这种渐变边框字体效果。 ## 元素叠加 首先，比较容易想到的写法是通过元素叠加实现。 1. 元素本身实现文字效果本身 2. 通过元素的伪元素，配合 `background-clip: text` 实现渐变文字，并且通过 transform 或者设置大几号的文字，实现渐变字体 3. 将（1）（2）进行叠加 我们尝试一下这种方式： ```HTML ``` ```CSS div { position: relative; width: 300px; height:...
最近，群里在讨论这么一个有趣的交互效果，来源于：[vueflow.dev](https://vueflow.dev/)：  通过审查元素，发现原效果借助了 Canvas 实现。 思索了一番，觉得这个效果利用 CSS 配合部分 Javascript 代码完全也是可以做到的。 于是动手尝试了一番，最终完美的复刻了该效果：  过程中还是有非常多有意思的技巧存在的，因此，本文将带大家一起，从 0 到 1 实现这个有趣的交互效果。 ## 利用混合模式实现叠加效果 整个效果，比较核心的一块便是当鼠标 Hover 上去时，整个元素叠加上一层黑色图层，但是呈现了不一样的叠加效果。 这个了解混合模式（`mix-blend-mode`）的同学应该一下就能想到。 在之前，我们也有多篇文章讲解过混合模式，感兴趣的可以随意快速浏览一下，下面是我写过的 15 篇与混合模式相关的合集链接： + [iCSS - 混合模式](https://github.com/chokcoco/iCSS/labels/%E6%B7%B7%E5%90%88%E6%A8%A1%E5%BC%8F)...
本文，我们将一起探讨探讨，如下所示的一个卡片 Hover 动画，应该如何实现：  这个效果的几个难点： 1. 鼠标移动的过程中，展示当前卡片边缘的 border 以及发光效果； 效果只出现在鼠标附近？这一块的实现方法就有很多种了，可以计算鼠标附近的范围，在范围内去实现的效果，但是这样成本太高了。 转换一下思维，其实也可以利用遮罩的思想。在一开始就已经实现好了整体效果，也就是渐变色的整个边框以及整体的内发光效果，通过遮罩的思想，让整个遮罩层跟随鼠标进行移动。 2. 整体的效果需要适配鼠标的移动，跟随鼠标移动，进行效果的切换； 基于上述动图中，到目前为止，纯 CSS 在鼠标移动效果跟随上，是没法解决的，这里需要引入一定量的 Javascript 代码。 基于上述难点（1）（2），下面我们就一起看看如何一步一步实现这个效果。 ## 搭建整个静态效果 首先，我们需要搭建整个静态效果。也就是在没任何 hover 的状态下的效果，如下所示：  由于，每张图背后的虚化图效果，应该是基于图片不同而千图千面，因此，不可能能够用一张背景图 Cover 所有情况。 并且，图片背后的虚化图的效果，需要与实际图片的颜色保持大致一致。 基于上述两点，我们很容易想到使用...