随笔分类 - 编码技巧
摘要：本文是 CSS Houdini 之 CSS Painting API 系列第四篇。 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！ 现代 CSS 高阶技巧，完美的波浪进度条效果！ 在上三篇中，我们详细介绍了 CSS Painting API 是如
阅读全文
摘要：背景 鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。 而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。 在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随，我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果，像是这样： 但是，可以看到，上
阅读全文
摘要：最近接到一个很有意思的需求，能否做到当内容横向溢出时，依然能够使用鼠标滚轮对内容进行滚动的方法。 什么意思呢？来看看这么一种情况： 我们有一个垂直方向溢出滚动的容器，以及一个水平方向溢出滚动的容器： 如果使用的是非触控板（大部分用户没有触控板），而是使用鼠标来进行操作，会发现，这两个容器中，只有垂直
阅读全文
摘要：在各种短视频界面上，我们经常会看到类似这样的点赞动画： 非常的有意思，有意思的交互会让用户更愿意进行互动。 那么，这么有趣的点赞动画，有没有可能使用纯 CSS 实现呢？那当然是必须的，本文，就将巧妙的借助 transition，仅仅使用 CSS 完成这么一个点赞动画。 实现不同表情的不断上升 如果使
阅读全文
摘要：本文将介绍一个新特性，从 Chrome 90 开始，overflow 新增的一个新特性 -- overflow: clip，使用它，轻松的对溢出方向进行控制。 overflow: clip 为何 首先，简单介绍下 overflow: clip 的用法。 overflow: clip: 与 overf
阅读全文
摘要：本文，将向大家介绍一种将多个 CSS 技巧运用到极致的技巧，利用纯 CSS 实现拼图游戏。 本技巧源自于 Temani Afif 的 CodePen CSS Only Puzzle game。一款完全由 CSS 实现的拼图游戏。 我们要做的，就是将散落的图片碎块，复原成一幅完整的图，像是这样： 注意
阅读全文
摘要：背景 某日，群友们在群里抛出这样一个问题，如何使用 CSS 实现如下的布局： 在 CSS 世界中，如果只是下述这种效果，还是非常容易实现的： 一旦涉及到圆角或者波浪效果，难度就会提升很多。 实现这种连续平滑的曲线其实是比较麻烦的，当然，也不是完全没有办法。本文，就会带大家看看，使用 CSS 实现上述
阅读全文
摘要：最近利用 CSS 实现了一些看似超出 CSS 能力的效果： 巧用渐变实现高级感拉满的背景光动画 Amazing！！CSS 也能实现极光？ 本文继续此系列，本文主要想探讨一下，使用 CSS 能否比较好的实现一些烟雾效果。像是这样： 仔细观察烟雾效果，有两个比较重要的特点： 模糊效果 颗粒感 首先看模糊
阅读全文
摘要：背景 今天逛 CodePen，看到了这样一个非常有意思的效果： CodePen Demo -- Material Design Menu By Bennett Feely 这个效果还是有一些值得探讨学习的点，下面我们一起来看看。 如何实现这样一个类似的效果？ 首先，想一想，如果让你去实现上面的效果，
阅读全文
摘要：本文将通过一个实际的业务需求，讲解如何实现 极端场景下文字加粗加边框效果 文字多重边框的效果 需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题： 在文字展示的时候，利用了 font-weight: bold 给文字进行加粗，但是觉得还是不够粗，有什么办法能够让文字更粗一点呢？ emm，不考
阅读全文
摘要：本文较短，将介绍巧用模糊实现视觉 3D 效果的技巧。 我们都知道，在正常的视觉效果中，离我们越近的通常我们会看的越清晰，而离我们较远则相对没那么清晰~ 我们可以利用清晰与模糊两种状态来构建视差效果。像是这样： 而在 CSS 中，我们可以利用模糊滤镜 filter: blur() 与 transfor
阅读全文
摘要：之前在这篇文章中 -- 《老生常谈之 CSS 实现三角形》，介绍了 6 种使用 CSS 实现三角形的方式。 但是其中漏掉了一个非常重要的场景，如何使用纯 CSS 实现带圆角的三角形呢？，像是这样： 本文将介绍几种实现带圆角的三角形的实现方式。 法一. 全兼容的 SVG 大法 想要生成一个带圆角的三角
阅读全文
摘要：通过本文，你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器，如何利用一些技巧性的操作，巧妙的同样实现毛玻璃效果，让这个效果真正能运用在业务当中 什么是 backdrop-filte
阅读全文
摘要：经常能看到有关 CSS 绘图的文章，譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就是少了一些难度，只需要有耐心，很多图形还是能够被慢慢实现出来的。 基于 CSS 绘图的这个需求，逐渐又有了新的
阅读全文
摘要：在之前，我介绍过几种使用纯 CSS 实现波浪效果的方式，关于它们有两篇相关的文章： 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果，思路非常有意思。 从定积分实现曲边三角形面积说起 在进入主题之前，先看看这个，在高等数学中，我们可以通
阅读全文
摘要：本文将介绍一种利用 CSS 获取图片主题色的小技巧。一起看看~ 背景 起因是微信技术群里有个同学发问，有什么方法能够获取图片的主色呢？有一张图片，获取他的主色调： 利用获取到的这个颜色值，来实现类似这样的功能 -- 容器中有一张图片，希望背景色可以适配图片的主色，像是这样： 大家出谋划策，有说利用
阅读全文
摘要：CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1，翻译过来也就是运动路径。本文将对 motion path 一探究竟，通过本文，你可以了解到： 什么是 CSS motion path 使用 CSS motion path 制作简单路径动画 使用 C
阅读全文
摘要：在之前的这篇文章 -- 一行 CSS 代码的魅力 中，我们介绍了一种使用一行 CSS 代码就能够生成的一种美妙（也许奇怪更合适）的背景。 本文，将继续介绍背景的一些有意思的知识，利用一些极小的单位，只需要短短几行代码，就能够产生出美妙而又有意思的背景效果~ 数量级对背景图形的影响 本文的主角主要是：
阅读全文
摘要：本文主要讲讲 CSS 非常新的一个特性，CSS @property，它的出现，极大的增强的 CSS 的能力！ 根据 MDN -- CSS Property，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性，允
阅读全文
摘要：在一些面经中，经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形，而常见的回答通常也只有使用 border 进行绘制一种方法。 而 CSS 发展到今天，其实有很多有意思的仅仅使用 CSS 就能绘制出来的三角形的方式，本文将具体罗列讲讲。 通过本文，你能了解到 6 种使用 CSS 绘
阅读全文