ChokCoco

摘要： 背景 鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。 而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。 在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随，我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果，像是这样： 但是，可以看到，上 阅读全文

摘要： 今天在论坛，有看到这样一道非常有意思的题目，简单的代码如下： <div> <p id="a">First Paragraph</p> </div> 样式如下： p#a { color: green; } div::first-line { color: blue; } 试问，标签 <p> 内的文字的 阅读全文

摘要： 最近，有群友问我，他们的一个作业，尽量使用少的标签去实现这样一个象棋布局： 他用了 60 多个标签，而他的同学，只用了 6 个，问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。 其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑 DOM 的消耗的同时，也需要关注代码的可读性， 阅读全文

摘要： 终于，在漫长的等待下，容器查询（CSS Container Queries）将在 Chrome 105 版本得到正式的支持！ 而目前，我们也能在 Chrome Canary 版本中，或者在 Chrome 93~104 通过开启 Enable CSS Container Queries 特性抢先体验。 阅读全文

摘要： 最近我在 CodePen 上看到了这样一个有意思的动画： 整个动画效果是在一个标签内，借助了 SVG PATH 实现。其核心在于对渐变（Gradient）的究极利用。 完整的代码你可以看看这里 -- CodePen DEMO -- to the future 🍻 By Jane Ori] 源代码还 阅读全文

摘要： 最近接到一个很有意思的需求，能否做到当内容横向溢出时，依然能够使用鼠标滚轮对内容进行滚动的方法。 什么意思呢？来看看这么一种情况： 我们有一个垂直方向溢出滚动的容器，以及一个水平方向溢出滚动的容器： 如果使用的是非触控板（大部分用户没有触控板），而是使用鼠标来进行操作，会发现，这两个容器中，只有垂直 阅读全文

摘要： 在各种短视频界面上，我们经常会看到类似这样的点赞动画： 非常的有意思，有意思的交互会让用户更愿意进行互动。 那么，这么有趣的点赞动画，有没有可能使用纯 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 实现的拼图游戏。 我们要做的，就是将散落的图片碎块，复原成一幅完整的图，像是这样： 注意 阅读全文

摘要： 本文将探讨一下，在多行文本情形下的一些有意思的文字动效。 多行文本，相对于单行文本，场景会复杂一些，但是在实际业务中，多行文本也是非常之多的，但是其效果处理比起单行文本会更困难。 单行与多行文本的渐隐 首先，我们来看这样一个例子，我们要实现这样一个单行文本的渐隐： 使用 mask，可以轻松实现这样的 阅读全文