摘要: 今天在论坛,有看到这样一道非常有意思的题目,简单的代码如下: <div> <p id="a">First Paragraph</p> </div> 样式如下: p#a { color: green; } div::first-line { color: blue; } 试问,标签 <p> 内的文字的 阅读全文
posted @ 2022-09-27 11:40 ChokCoco 阅读(512) 评论(0) 推荐(4) 编辑
摘要: 最近,有群友问我,他们的一个作业,尽量使用少的标签去实现这样一个象棋布局: 他用了 60 多个标签,而他的同学,只用了 6 个,问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。 其实,对于一个页面的布局而言,标签越少不一定是好事,我们在考虑 DOM 的消耗的同时,也需要关注代码的可读性, 阅读全文
posted @ 2022-09-20 10:35 ChokCoco 阅读(3054) 评论(24) 推荐(42) 编辑
摘要: 终于,在漫长的等待下,容器查询(CSS Container Queries)将在 Chrome 105 版本得到正式的支持! 而目前,我们也能在 Chrome Canary 版本中,或者在 Chrome 93~104 通过开启 Enable CSS Container Queries 特性抢先体验。 阅读全文
posted @ 2022-09-14 10:12 ChokCoco 阅读(2177) 评论(4) 推荐(10) 编辑
摘要: 最近我在 CodePen 上看到了这样一个有意思的动画: 整个动画效果是在一个标签内,借助了 SVG PATH 实现。其核心在于对渐变(Gradient)的究极利用。 完整的代码你可以看看这里 -- CodePen DEMO -- to the future 🍻 By Jane Ori] 源代码还 阅读全文
posted @ 2022-09-09 14:49 ChokCoco 阅读(1774) 评论(6) 推荐(21) 编辑
摘要: 最近接到一个很有意思的需求,能否做到当内容横向溢出时,依然能够使用鼠标滚轮对内容进行滚动的方法。 什么意思呢?来看看这么一种情况: 我们有一个垂直方向溢出滚动的容器,以及一个水平方向溢出滚动的容器: 如果使用的是非触控板(大部分用户没有触控板),而是使用鼠标来进行操作,会发现,这两个容器中,只有垂直 阅读全文
posted @ 2022-09-07 09:06 ChokCoco 阅读(2896) 评论(6) 推荐(31) 编辑
摘要: 在各种短视频界面上,我们经常会看到类似这样的点赞动画: 非常的有意思,有意思的交互会让用户更愿意进行互动。 那么,这么有趣的点赞动画,有没有可能使用纯 CSS 实现呢?那当然是必须的,本文,就将巧妙的借助 transition,仅仅使用 CSS 完成这么一个点赞动画。 实现不同表情的不断上升 如果使 阅读全文
posted @ 2022-08-30 10:24 ChokCoco 阅读(1573) 评论(5) 推荐(18) 编辑
摘要: 本文将介绍一个新特性,从 Chrome 90 开始,overflow 新增的一个新特性 -- overflow: clip,使用它,轻松的对溢出方向进行控制。 overflow: clip 为何 首先,简单介绍下 overflow: clip 的用法。 overflow: clip: 与 overf 阅读全文
posted @ 2022-08-26 11:56 ChokCoco 阅读(2109) 评论(4) 推荐(8) 编辑
摘要: 本文,将向大家介绍一种将多个 CSS 技巧运用到极致的技巧,利用纯 CSS 实现拼图游戏。 本技巧源自于 Temani Afif 的 CodePen CSS Only Puzzle game。一款完全由 CSS 实现的拼图游戏。 我们要做的,就是将散落的图片碎块,复原成一幅完整的图,像是这样: 注意 阅读全文
posted @ 2022-08-23 10:37 ChokCoco 阅读(3112) 评论(10) 推荐(32) 编辑
摘要: 本文将探讨一下,在多行文本情形下的一些有意思的文字动效。 多行文本,相对于单行文本,场景会复杂一些,但是在实际业务中,多行文本也是非常之多的,但是其效果处理比起单行文本会更困难。 单行与多行文本的渐隐 首先,我们来看这样一个例子,我们要实现这样一个单行文本的渐隐: 使用 mask,可以轻松实现这样的 阅读全文
posted @ 2022-08-16 10:46 ChokCoco 阅读(973) 评论(0) 推荐(14) 编辑
摘要: 本文将带大家简单实现一个会动的鸿蒙 LOGO。 emmm,写本文的动机是之前在掘金看到一篇实现鸿蒙 LOGO 的文章 -- 产品经理:鸿蒙那个开场动画挺帅的 给咱们页面也整一个呗 鸿蒙的 LOGO 本身是这样的: 该篇作者最终实现的是一个字母 O 的动画展开过程: 而本文想尝试的,是该 LOGO 的 阅读全文
posted @ 2022-08-12 16:42 ChokCoco 阅读(1013) 评论(2) 推荐(12) 编辑