随笔分类 - CSS进阶
摘要：本文将介绍一个非常有意思的功能，使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样： 思路 首先，要实现这样一个效果如果不要求可以拖拽，其实有非常多的办法。 将两张图片叠加在一起 改变上层图片的宽度，或者使用 mask， 改变 mask 的透明度区间变化 两种方式都简单示意一
阅读全文
摘要：最近，有一则非常振奋人心的消息，CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting，表示 CSS 嵌套规范即将进入规范的 FWPD 阶段。 目前对应的规范为 -- CSS Nesting Module。 随着 CSS 自定义属性（CSS Variab
阅读全文
摘要：本文将使用纯 CSS，带大家一步一步实现一个这样的科幻字符跳动背景动画。类似于这样的字符雨动画： 或者是类似于这样的： 运用在一些类似科技主题的背景之上，非常的添彩。 文字的竖排 首先第一步，就是需要实现文字的竖向排列： 这一步非常的简单，可能方法也很多，这里我简单罗列一下： 使用控制文本排列的属性
阅读全文
摘要：经常会碰到，问一个 CSS 属性，例如 position 有多少取值。 通常的回答是 static、relative、absolute 和 fixed 。当然，还有一个稍微生僻的 sticky 。其实，除此之外， CSS 属性通常还可以设置下面几个值： initial inherit unset r
阅读全文
摘要：在 CSS 中，我们经常会与各种方向方位打交道。 譬如 margin、padding，它们就会有 margin-left、margin-right 或者是 padding-left、padding-right。还有定位中的 left、top、right、bottom，它们表示了上下左右不同的方位。
阅读全文
摘要：之前在这篇文章中 -- 《老生常谈之 CSS 实现三角形》，介绍了 6 种使用 CSS 实现三角形的方式。 但是其中漏掉了一个非常重要的场景，如何使用纯 CSS 实现带圆角的三角形呢？，像是这样： 本文将介绍几种实现带圆角的三角形的实现方式。 法一. 全兼容的 SVG 大法 想要生成一个带圆角的三角
阅读全文
摘要：通过本文，你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器，如何利用一些技巧性的操作，巧妙的同样实现毛玻璃效果，让这个效果真正能运用在业务当中 什么是 backdrop-filte
阅读全文
摘要：在 Web 动画方面，有一套非常经典的原则 -- Twelve basic principles of animation，也就是关于动画的 12 个基本原则（也称之为迪士尼动画原则），网上对它的解读延伸的文章也非常之多： Animation Principles for the Web [译文]网
阅读全文
摘要：本文将介绍 CSS 中一个比较有意思的伪元素 ::marker，利用它，我们可以让我们的文字序号变得更加的有意思！ 什么是 ::marker CSS 伪元素 ::marker 是从 CSS Pseudo-Elements Level 3 开始新增，CSS Pseudo-Elements Level
阅读全文
摘要：经常能看到有关 CSS 绘图的文章，譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就是少了一些难度，只需要有耐心，很多图形还是能够被慢慢实现出来的。 基于 CSS 绘图的这个需求，逐渐又有了新的
阅读全文
摘要：依稀记得，某年广东语文高考作文的相关描述 -- “有时，常识虽易知而难行，有时，常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被削弱。 CSS 更新之快，只能不断鞭策自己持续学习，一直呆在舒适区中，很容易就跟不上节奏。当然，不仅仅是 CSS，对于任何技术任何行业也可以套用这句话。
阅读全文
摘要：文本将介绍 CSS 媒体查询中新增的几个特性功能： prefers-reduced-motion prefers-color-scheme prefers-contrast prefers-reduced-transparency prefers-reduced-data 利用好它们，能够很好的提升
阅读全文
摘要：在之前，我介绍过几种使用纯 CSS 实现波浪效果的方式，关于它们有两篇相关的文章： 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果，思路非常有意思。 从定积分实现曲边三角形面积说起 在进入主题之前，先看看这个，在高等数学中，我们可以通
阅读全文
摘要：本文将介绍一种利用 CSS 获取图片主题色的小技巧。一起看看~ 背景 起因是微信技术群里有个同学发问，有什么方法能够获取图片的主色呢？有一张图片，获取他的主色调： 利用获取到的这个颜色值，来实现类似这样的功能 -- 容器中有一张图片，希望背景色可以适配图片的主色，像是这样： 大家出谋划策，有说利用
阅读全文
摘要：在介绍新的 CSS 属性 contain 之前，读者首先需要了解什么是页面的重绘与重排。 之前已经描述过很多次了，还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势。 OK，下面进入本文正题， contain 为何？ contain 属性允许我们指定特定的 DOM 元素和它的子元素，让它们能
阅读全文
摘要：CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1，翻译过来也就是运动路径。本文将对 motion path 一探究竟，通过本文，你可以了解到： 什么是 CSS motion path 使用 CSS motion path 制作简单路径动画 使用 C
阅读全文
摘要：在之前的这篇文章 -- 一行 CSS 代码的魅力 中，我们介绍了一种使用一行 CSS 代码就能够生成的一种美妙（也许奇怪更合适）的背景。 本文，将继续介绍背景的一些有意思的知识，利用一些极小的单位，只需要短短几行代码，就能够产生出美妙而又有意思的背景效果~ 数量级对背景图形的影响 本文的主角主要是：
阅读全文
摘要：在最新的 Chrome Canary 中，一个有意思的 CSS 语法 Container Queries 得到了支持。 Chrome Canary：开发者专用的每日构建版，站上网络科技最前沿。当然，不一定稳定~ 而在最近几个 Chrome 版本中，有一些挺有意思的属性相继得到支持，本文就将介绍一下，
阅读全文
摘要：本文主要讲讲 CSS 非常新的一个特性，CSS @property，它的出现，极大的增强的 CSS 的能力！ 根据 MDN -- CSS Property，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性，允
阅读全文
摘要：在一些面经中，经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形，而常见的回答通常也只有使用 border 进行绘制一种方法。 而 CSS 发展到今天，其实有很多有意思的仅仅使用 CSS 就能绘制出来的三角形的方式，本文将具体罗列讲讲。 通过本文，你能了解到 6 种使用 CSS 绘
阅读全文