摘要: 在 CSS 中,存在许多数学函数,这些函数能够通过简单的计算操作来生成某些属性值,例如 : * calc():用于计算任意长度、百分比或数值型数据,并将其作为 CSS 属性值。 * min() 和 max():用于比较一组数值中的最大值或最小值,也可以与任意长度、百分比或数值型数据一同使用。 * c 阅读全文
posted @ 2023-05-25 10:03 ChokCoco 阅读(294) 评论(0) 推荐(11) 编辑
摘要: 在业务中,有这么一种场景,表格下的某一列 ID 值,文本超长了,正常而言会是这样: 通常,这种情况都需要超长省略溢出打点,那么,就会变成这样: 但是,这种展示有个缺点,3 个 ID 看上去就完全一致了,因此,PM 希望能够实现头部省略打点,尾部完全展示,那么,最终希望的效果就会是这样的: OK,很有 阅读全文
posted @ 2023-04-27 10:37 ChokCoco 阅读(2425) 评论(16) 推荐(30) 编辑
摘要: 最近,在 CodePen 上,看到一个非常有意思的图片动效,效果如下: 原效果链接:CodePen Demo - 1 div pure CSS blinds staggered animation in 13 declarations 本身这个动画效果,并没有多惊艳。惊艳的地方在于原作者的实现方式非 阅读全文
posted @ 2023-04-24 10:22 ChokCoco 阅读(1802) 评论(1) 推荐(22) 编辑
摘要: 今日,群友提问,如何实现这么一个 Loading 效果: 这个确实有点意思,但是这是 CSS 能够完成的? 没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们之前的: 使用纯 CSS 实现超酷炫的粘性气泡效果 巧用 CSS 实现酷炫的充电 阅读全文
posted @ 2023-04-13 10:10 ChokCoco 阅读(5826) 评论(22) 推荐(64) 编辑
摘要: 之前,整个《现代图片性能优化及体验优化指南》分了 5 篇来发,本文是系列合集,方便大家收藏及连贯阅读。 图片资源,在我们的业务中可谓是占据了非常大头的一环,尤其是其对带宽的消耗是十分巨大的。 对图片的性能优化及体验优化在今天就显得尤为重要。本文,就将从各个方面阐述,在各种新特性满头飞的今天,我们可以 阅读全文
posted @ 2023-03-31 10:25 ChokCoco 阅读(808) 评论(1) 推荐(13) 编辑
摘要: 最近,在看 LPL 比赛的时候,看到这样一个有意思的六芒星能力图动画: 今天,我们就来使用纯 CSS 实现这样一个动画效果! 实现背景网格 对于如下这样一个背景网格,最好的方式当然肯定是切图,或者使用 SVG 路径。 如果一定要使用 CSS,勉强也能做,这就涉及了不规则图形边框效果,我们有一些方式可 阅读全文
posted @ 2023-03-24 09:08 ChokCoco 阅读(3662) 评论(6) 推荐(32) 编辑
摘要: 本文将介绍一个角向渐变的一个非常有意思的小技巧! 我们尝试使用 CSS 绘制如下图形: 在之前,类似的图案,其实我们有尝试过,在 单标签实现复杂的棋盘布局 一文中,我们用单标签实现了这样一个棋盘布局: 那么,本文有什么特殊之处呢?让我们一探究竟。 快速实现网格布局 首先,上述的布局还是希望使用一个标 阅读全文
posted @ 2023-03-21 10:17 ChokCoco 阅读(1600) 评论(4) 推荐(14) 编辑
摘要: 本文是系列第五篇,终章。系列文章: 现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用 现代图片性能优化及体验优化指南 - 响应式图片方案 现代图片性能优化及体验优化指南 - 缩放精细化展示及避免布局偏移、拉伸 现代图片性能优化及体验优化指南 - 懒加载及异步图像解码方案 图 阅读全文
posted @ 2023-03-10 09:12 ChokCoco 阅读(1591) 评论(1) 推荐(7) 编辑
摘要: 本文将介绍一种基于 CSS 变量技巧,通过合理使用 CSS 变量,实现 CSS 动画 @keyframes 的复用。 CSS 变量 CSS 变量大家应该都比较熟悉了,已经不能算是新知识了,快速过一遍。 CSS 变量(CSS Variable),在之前也叫做 CSS 自定义属性,其使用方式如下: // 阅读全文
posted @ 2023-03-07 09:04 ChokCoco 阅读(3639) 评论(2) 推荐(37) 编辑
摘要: 在许久之前,曾经写过这样一篇文章 -- 不定宽溢出文本适配滚动。我们实现了这样一种效果: 文本内容不超过容器宽度,正常展示 文本内容超过容器的情况,内容可以进行跑马灯来回滚动展示 像是这样: 但是,之前的方案,有一个很明显的缺点,如果我们事先知道了容器的宽度,那么没问题,但是如果没法确定容器的宽度, 阅读全文
posted @ 2023-03-02 09:15 ChokCoco 阅读(539) 评论(2) 推荐(8) 编辑