随笔分类 - html,css,javascript
摘要：本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗
阅读全文
摘要：如何实现下面这个渐变的边框效果： 这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。 border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和
阅读全文
摘要：本文的主题是 Glitch Art，故障艺术。 什么是故障艺术？我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉，看起来具有闪烁、震动的效果，很吸引人眼球。 故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到
阅读全文
摘要：标题中的 Cascading 亦可以理解为级联。 进入正文，这是一个很有意思的现象。可以直接跳到 总结一下 部分，看完再回过头来阅读本文。 引子 假设我们有如下结构： 上面的 p 标签只有一个内联 CSS，很明显，在没有其他样式的干预下，文本 .txt 的颜色肯定就是红色的。 如果此时，我们希望改变
阅读全文
摘要：本文是内部的一次分享沉淀，偏向基础但是涉及了一些有意思的细节，文笔有限，才疏学浅，文中若有不正之处，万望告知。 前端的一大工作内容就是去兼容页面在不同内核的浏览器，不同的设备，不同的分辨率下的行为，使页面的能正常工作在各种各样的宿主环境当中。 而本文的主题 -- 移动端开发的兼容适配与性能优化，就是
阅读全文
摘要：写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？ 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构： 修改 outline-o
阅读全文
摘要：CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器，尽可能的去挖掘这个选择器在不同场景下的不同用法。 简单的语法介绍 [attr]：该选择器选择包含 attr 属性的所有元素，不论 a
阅读全文
摘要：为了引出本文的主题，先看看这个问题，最快水平垂直居中一个元素的方法是什么？ 水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了： <div class="g-container"> <div class="g-box"></di
阅读全文
摘要：正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的： 或者这样的： 我们希望，仅仅使用 CSS ，效果能再更进一步吗？能不能是这样子： 如何实现 嗯，我们需要使用 filter + mix-bl
阅读全文
摘要：直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样： 通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。 当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标
阅读全文
摘要：这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。 因为 MDN 上关于这个属性，没有中文文档，所以一直在想一个合理贴切的中文翻译。直译一下： box -- 盒，可以理解为元素盒模型 decoration -- 装饰，理解为元素样式 br
阅读全文
摘要：结论先行，如何使用 CSS 实现下述滚动条效果？ 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便
阅读全文
摘要：CSS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。 伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的
阅读全文
摘要：上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后，很多朋友找我讨论，感叹 CSS 的奇妙。 然后昨天，群里一位朋友问到了一个和这个效果比较类似的效果，问如何 将下面这个动画的下划线效果，从左进入，右边离开修改为从上方进入，下方离开。 描述很难理解，看看原本的效果： 难点所在 第一眼
阅读全文
摘要：先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦
阅读全文
摘要：很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术，当时惊为天人，感慨还可以这样玩，私底下也曾多次想过有没有其他方法可以实现，又或者不仅仅局限于 PNG 图片。 mix-blend-mode 与 background-blend-mode mix-blend-mode 在
阅读全文
摘要：关于 chrome 扩展的文章，很久之前也写过一篇。清除页面广告？身为前端，自己做一款简易的chrome扩展吧。 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点。 什么是 chrome 扩展程序 扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序。对于前端工程师而言，其最大的便
阅读全文
摘要：承接上一篇你所不知道的 CSS 动画技巧与细节，本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！ 系列 CSS 文章汇总在我的 Github ，持续更新，欢迎点个 star 订阅收藏。 OK，下面直接进入正文。本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的
阅读全文
摘要：怕标题起的有点大，下述技巧如果你已经掌握了看看就好，欢迎斧正，本文希望通过介绍一些 CSS 不太常用的技巧，辅以一些实践，让读者可以更加深入的理解掌握 CSS 动画。 废话少说，直接进入正题，本文提到的动画不加特殊说明，皆指 CSS 动画。 正负旋转相消 嗯。名字起的很奇怪，好像数学概念一样。 （写
阅读全文
摘要：大家都知道，position:fixed 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。它的作用是： position:fixed 的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。 但是，在许多特定的场合，指定了 position:fix
阅读全文