摘要:本技巧来自这篇文章 -- How to animate box-shadow with silky smooth performance 本文不是直译,因为觉得这个技巧很有意思很有用,遂起一文。 box-shadow 在我们的工作中使用以及越来越多,伴随阴影的动画或多或少都有一点。假设,我们有下面这 阅读全文
posted @ 2019-10-31 10:38 ChokCoco 阅读 (332) 评论 (0) 编辑
摘要:本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅,文中若有不正之处,万望告知。 前端的一大工作内容就是去兼容页面在不同内核的浏览器,不同的设备,不同的分辨率下的行为,使页面的能正常工作在各种各样的宿主环境当中。 而本文的主题 -- 移动端开发的兼容适配与性能优化,就是 阅读全文
posted @ 2019-09-05 11:14 ChokCoco 阅读 (2306) 评论 (7) 编辑
摘要:之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family。 该篇文章基本没有太多移动端的字体选择及分析。并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文。 正文从这里开始。 各大网站最新 font-family 作为前端的一个习惯,浏览各个网站的时候总 阅读全文
posted @ 2019-08-14 11:07 ChokCoco 阅读 (895) 评论 (1) 编辑
摘要:写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构: 修改 outline-o 阅读全文
posted @ 2019-08-08 10:30 ChokCoco 阅读 (2909) 评论 (20) 编辑
摘要:CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场景下的不同用法。 简单的语法介绍 [attr]:该选择器选择包含 attr 属性的所有元素,不论 a 阅读全文
posted @ 2019-06-18 10:47 ChokCoco 阅读 (944) 评论 (1) 编辑
摘要:为了引出本文的主题,先看看这个问题,最快水平垂直居中一个元素的方法是什么? 水平垂直居中也算是 CSS 领域最为常见的一个问题了,不同场景下的方法也各不相同,各有优劣。嗯,下面这种应该算是最便捷的了: 上面的 display: flex 替换成 display: inline-flex | grid 阅读全文
posted @ 2019-05-23 10:56 ChokCoco 阅读 (3449) 评论 (10) 编辑
摘要:正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰。 嗯,长什么样子?在 CodePen 上输入关键字 CSS Fire,能找到这样的: 或者这样的: 我们希望,仅仅使用 CSS ,效果能再更进一步吗?能不能是这样子: 如何实现 嗯,我们需要使用 filter + mix-bl 阅读全文
posted @ 2019-03-27 10:51 ChokCoco 阅读 (5060) 评论 (17) 编辑
摘要:直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为。而鼠标跟随这种效果属于行为,要实现通常都需要借助 JS。 当然,本文的重点,就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标 阅读全文
posted @ 2019-03-06 10:50 ChokCoco 阅读 (6262) 评论 (13) 编辑
摘要:这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。 因为 MDN 上关于这个属性,没有中文文档,所以一直在想一个合理贴切的中文翻译。直译一下: box -- 盒,可以理解为元素盒模型 decoration -- 装饰,理解为元素样式 br 阅读全文
posted @ 2019-02-28 10:39 ChokCoco 阅读 (956) 评论 (2) 编辑
摘要:结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便 阅读全文
posted @ 2019-01-09 14:34 ChokCoco 阅读 (6737) 评论 (34) 编辑