摘要:如何实现下面这个渐变的边框效果: 这个问题本身不难,实现的方法也有一些,主要是有一些细节需要注意。 border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 阅读全文
posted @ 2020-02-17 15:08 ChokCoco 阅读 (722) 评论 (2) 编辑
摘要:本文的主题是 Glitch Art,故障艺术。 什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉,看起来具有闪烁、震动的效果,很吸引人眼球。 故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到 阅读全文
posted @ 2020-02-10 10:46 ChokCoco 阅读 (1621) 评论 (9) 编辑
摘要:标题中的 Cascading 亦可以理解为级联。 进入正文,这是一个很有意思的现象。可以直接跳到 总结一下 部分,看完再回过头来阅读本文。 引子 假设我们有如下结构: 上面的 p 标签只有一个内联 CSS,很明显,在没有其他样式的干预下,文本 .txt 的颜色肯定就是红色的。 如果此时,我们希望改变 阅读全文
posted @ 2020-01-16 11:44 ChokCoco 阅读 (1275) 评论 (6) 编辑
摘要:循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了。有了电池,那接下来直接充电吧。最最简单的动画,那应该是用色彩把整个电池灌满即可。 方法很多,代码也很简单,直接看效果: 有内味了,如果 阅读全文
posted @ 2019-12-23 10:31 ChokCoco 阅读 (4618) 评论 (20) 编辑
摘要:根据 CSS Scroll Snap Module Level 1 规范,CSS 新增了一批能够控制滚动的属性,让滚动能够在仅仅通过 CSS 的控制下,得到许多原本需要 JS 脚本介入才能实现的美好交互。 Tips:本文截的一些 Gif 图涉及容器滚动,效果不是很好,可以点进 Demo 里实际感受下 阅读全文
posted @ 2019-12-06 10:57 ChokCoco 阅读 (693) 评论 (1) 编辑
摘要:最近一直在使用 css-doodle 实现一些 CSS 效果。 css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 CSS 效果(或许可以称之为 CSS 艺术)。后续几篇文章可能都会与之有关。 当然,本文的主角并不是 阅读全文
posted @ 2019-11-22 10:41 ChokCoco 阅读 (1883) 评论 (5) 编辑
摘要:本技巧来自这篇文章 -- How to animate box-shadow with silky smooth performance 本文不是直译,因为觉得这个技巧很有意思很有用,遂起一文。 box-shadow 在我们的工作中使用以及越来越多,伴随阴影的动画或多或少都有一点。假设,我们有下面这 阅读全文
posted @ 2019-10-31 10:38 ChokCoco 阅读 (944) 评论 (1) 编辑
摘要:本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅,文中若有不正之处,万望告知。 前端的一大工作内容就是去兼容页面在不同内核的浏览器,不同的设备,不同的分辨率下的行为,使页面的能正常工作在各种各样的宿主环境当中。 而本文的主题 -- 移动端开发的兼容适配与性能优化,就是 阅读全文
posted @ 2019-09-05 11:14 ChokCoco 阅读 (3441) 评论 (7) 编辑
摘要:之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family。 该篇文章基本没有太多移动端的字体选择及分析。并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文。 正文从这里开始。 各大网站最新 font-family 作为前端的一个习惯,浏览各个网站的时候总 阅读全文
posted @ 2019-08-14 11:07 ChokCoco 阅读 (1748) 评论 (1) 编辑
摘要:写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构: 修改 outline-o 阅读全文
posted @ 2019-08-08 10:30 ChokCoco 阅读 (3446) 评论 (20) 编辑