上一页 1 2 3 4 5 6 7 8 9 10 ··· 23 下一页
摘要: 今日,群里有个很有意思的问题,问我如何实现一个彩色的,带渐变的二维码,像是这样: 很有意思的问题,我们在百度谷歌,搜索 qrcode,能搜到非常多在线制作二维码的工具,它们其中一些也会带有制作渐变二维码的功能。但是它们大部分都是 Canvas 或者其它编程语言实现的。 如果我们现在已经有了一张白底黑 阅读全文
posted @ 2022-03-14 10:07 ChokCoco 阅读(1240) 评论(1) 推荐(5) 编辑
摘要: 在 CSS 规范 Scroll-linked Animations 中,推出了一个划时代的 CSS 功能。也就是 -- The @scroll-timeline at-rule,直译过来就是滚动时间线。 本文,就将带大家一探究竟,从入门到学会使用 CSS @scroll-timeline。 何为 @ 阅读全文
posted @ 2022-03-07 10:18 ChokCoco 阅读(2736) 评论(9) 推荐(21) 编辑
摘要: 最近有个小伙伴问我,在某个网站看到一个使用 SVG 实现的炫彩三角边框动画,问能否使用 CSS 实现: 很有意思的一个动画效果,立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画,非常的类似: 其核心就是利用了角向渐变(conic-gradient),然后将图案的中心区域通过覆盖遮罩 阅读全文
posted @ 2022-03-03 10:06 ChokCoco 阅读(2122) 评论(5) 推荐(24) 编辑
摘要: 今天,在 CodePen 上看到一个很有意思的效果 -- GSAP 3 ETC Variable Font Wave,借助了 JS 动画库 GSAP 实现,一起来看看: 我寻思着能否使用 CSS 复刻一版,鼓捣了一会,利用纯 CSS 成功实现了原效果。 上述效果,最核心的就是文字的动画,文字从较细贴 阅读全文
posted @ 2022-02-28 10:51 ChokCoco 阅读(4102) 评论(8) 推荐(23) 编辑
摘要: 最近几年 CSS 界的大事之一是每年年底的 《State Of CSS》,也就是 CSS 现状调查,去年年底发布了《State Of CSS 2021》。其中关于特性这一章,会列出一些比较新的 CSS 特性在当年的使用情况概览: 每个图代表一个特性,上图是按照使用数量进行区分,外圈表示听说过,而内圈 阅读全文
posted @ 2022-02-24 09:56 ChokCoco 阅读(834) 评论(1) 推荐(4) 编辑
摘要: 在我们的页面中,经常会出现这样的问题,一块区域内的文本或者边框,在展示的时候,变得特别的模糊,如下(数据经过脱敏处理): 正常而言,应该是这样的: emmm,可能大图不是很明显,我们取一细节对比,就非常直观了: 何时触发这种现象? 那么?什么时候会触发这种问题呢?在 Google 上,其实我们能搜到 阅读全文
posted @ 2022-02-21 10:39 ChokCoco 阅读(2760) 评论(4) 推荐(18) 编辑
摘要: 最近 S11 LPL 春季赛开赛,在看比赛的过程中,我发现新赛季的 Ban/Pick 选人阶段,出现了一种新的,有意思的遮罩效果,如下图所示: 当然,它是一个动态的效果,当选人的过程中,会有一种呼吸的效果: Gif 图有点糊,总的而言,就是一种接近迷雾的遮罩效果。并且,他是能够动态变化的。 本文将探 阅读全文
posted @ 2022-02-15 10:44 ChokCoco 阅读(826) 评论(3) 推荐(9) 编辑
摘要: 最近,我们内部的一个低代码平台完工上线,它的首页大概是这样子(数据脱敏): 当然,这个不是项目不是本文的重点。主要看看这个页面的背景,一个磨砂(毛玻璃)质感效果的渐变背景图,看上去是比较高级的。 剥离掉页面的内容元素,只剩下背景的话,大概是这样: 一开始是打算切图实现的,但是仔细一想,这个效果使用 阅读全文
posted @ 2022-01-26 10:11 ChokCoco 阅读(3826) 评论(11) 推荐(39) 编辑
摘要: 有群友问我,使用 CSS 如何实现如下 Loading 效果: 这是一个非常有意思的问题。 我们知道,使用 CSS,我们可以非常轻松的实现这样一个动画效果: <div></div> div { width: 100px; height: 100px; border-radius: 50%; bord 阅读全文
posted @ 2022-01-19 10:20 ChokCoco 阅读(4711) 评论(8) 推荐(33) 编辑
摘要: 本文将比较全面细致的梳理一下 CSS 动画的方方面面,针对每个属性用法的讲解及进阶用法的示意,希望能成为一个比较好的从入门到进阶的教程。 CSS 动画介绍及语法 首先,我们来简单介绍一下 CSS 动画。 最新版本的 CSS 动画由规范 -- CSS Animations Level 1 定义。 CS 阅读全文
posted @ 2022-01-13 10:11 ChokCoco 阅读(6348) 评论(13) 推荐(59) 编辑
上一页 1 2 3 4 5 6 7 8 9 10 ··· 23 下一页