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