介绍

简单说这个 Houdini 是一系列 CSS 底层 API，它可以让我们扩展 CSS，做出一些 Polyfill。

举一个例子，让大家有个画面。

我们可以通过 CSS + JS + Canvas 语法来自创 CSS 语法，游览器解析 CSS 时它会跑我们的 JS，而 JS 用类似 Canvas 画画的方式去达成最终的渲染效果。

这是其中一个 Houdini API 的玩法，当然还有很多种。

参考

YouTube – CSS Will Never Be The Same

功能强大、值得关注的CSS Houdini API

Can I use – attributeStyleMap

Can I use – Houdini

Is Houdini ready yet‽

可以用了吗？

Firefox 是最大的问题。Safari 是第二大问题（手机 IOS）

所以基本上是不能用啦。所以我也就不打算研究了。以后再继续。。。

CSS – Houdini的更多相关文章

  1. CSS Houdini：用浏览器引擎实现高级CSS效果

    vivo 互联网前端团队-Wei Xing Houdini被称之为Magic of styling and layout on the web,看起来十分神秘,但实际上,Houdini并非什么神秘组织 ...

  2. 从CSS到houdini

    0. 前言 平时写CSS,感觉有很多多余的代码或者不好实现的方法,于是有了预处理器的解决方案,主旨是write less &do more.其实原生css中,用上css变量也不差,加上bem命 ...

  3. 前端读者 | 别人写的css，你敢用吗？

    本文来自@yeaseonzhang:链接:http://yeaseonzhang.github.io/2018/04/10/%E5%88%AB%E4%BA%BA%E5%86%99%E7%9A%84cs ...

  4. CSS @property，让不可能变可能

    本文主要讲讲 CSS 非常新的一个特性,CSS @property,它的出现,极大的增强的 CSS 的能力! 根据 MDN -- CSS Property,@property CSS at-rule ...

  5. 现代化CSS

    Less Sass less Sass 与Less相比SASS更适合大型,底层的开发 Compass CSS核心技巧 CSS应用 现代化CSS方法论 CSS分层与面向对象 为什么要对CSS分层 CSS ...

  6. 现代 CSS 指南 -- at-rule 规则扫盲

    大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 这里 ...

  7. 现代 CSS 之高阶图片渐隐消失术

    在过往,我们想要实现一个图片的渐隐消失.最常见的莫过于整体透明度的变化,像是这样: <div class="img"></div> div { width: ...

  8. 现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！

    在上一篇文章中 -- 现代 CSS 之高阶图片渐隐消失术,我们借助了 CSS @Property 及 CSS Mask 属性,成功的实现了这样一种图片渐变消失的效果: CodePen Demo -- ...

  9. 现代 CSS 高阶技巧，完美的波浪进度条效果！

    本文是 CSS Houdini 之 CSS Painting API 系列第三篇. 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我 ...

  10. 现代 CSS 高阶技巧，不规则边框解决方案

    本文是 CSS Houdini 之 CSS Painting API 系列第四篇. 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 现代 CSS ...

随机推荐

  1. Spring MVC 中 HttpMessageConverter 转换器

    1. Spring MVC 中 HttpMessageConverter 转换器 @ 目录 1. Spring MVC 中 HttpMessageConverter 转换器 2. 补充:什么是 HTT ...

  2. Python 生成条形码、二维码 （Code 128、EAN-13、QR code等）

    条形码和二维码是现代信息交换和数据存储的重要工具,它们将信息以图形的形式编码,便于机器识别和数据处理,被广泛应用于物流.零售.医疗.教育等各领域.本文将介绍如何使用Python快速生成各种常见的条形码 ...

  3. 玄机-第一章 应急响应-Linux日志分析

    目录 前言 简介 应急开始 准备工作 查看auth.log文件 grep -a 步骤 1 步骤 2 步骤 3 步骤 4 步骤 5 总结 前言 又花了一块rmb玩玄机...啥时候才能5金币拿下一个应急靶 ...

  4. WordPress基础之菜单导航栏设置

    菜单是WordPress的一项重要功能,方便用户快速打开网站页面,我们通常说的网站导航栏就是菜单.菜单通常显示在网站的顶部或者底部,以Apple官网的为例: 这篇文章我们就学习下:如何添加.删除菜单: ...

  5. 【SpringCloud】 Re01

    简单理解 接口跨服务调用 说白了 就是原来只是调用一个接口就能得到资源,现在是调用两个或者更多接口,这些接口来自不同的服务 (从前端的角度来看依然只是调用这个接口,只是这个接口背后又去调用其他的接口了 ...

  6. 【Mybatis-Plus】03 SpringBoot整合

    创建SpringBoot工程: 选择辅助三件套: 再导入MP相关依赖坐标: <!-- jdbc --> <dependency> <groupId>mysql< ...

  7. 最快视频转绘-AnimateDiff-Lightning

    最快视频转绘-AnimateDiff-Lightning Video-to-Video Generation AnimateDiff-Lightning 非常适合视频到视频的生成.使用 Control ...

  8. Apache SeaTunnel 及 Web 功能部署指南(小白版)

    在大数据处理领域,Apache SeaTunnel 已成为一款备受青睐的开源数据集成平台,它不仅可以基于Apache Spark和Flink,而且还有社区单独开发专属数据集成的Zeta引擎,提供了强大 ...

  9. NoSQL之事务和相关特性

    NoSQL 简介 NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL". 在现代的计算系统上每天网络上都会产生庞大的数据量. 这些数据有很大一部分是由关 ...

  10. 无缝融入，即刻智能[一]：Dify-LLM大模型平台，零编码集成嵌入第三方系统，42K+星标见证专属智能方案[含ollama部署]

    无缝融入,即刻智能[一]:Dify-LLM大模型平台,零编码集成嵌入第三方系统,42K+星标见证专属智能方案 1.Dify 简介 1.1 功能情况 Dify,一款引领未来的开源大语言模型(LLM)应用 ...