CSS @property，让不可能变可能

news2024/10/5 16:32:22

本文主要讲讲 CSS 非常新的一个特性，CSS @property，它的出现，极大的增强的 CSS 的能力！

根据 MDN -- CSS Property，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性，允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。

CSS Houdini 又是什么呢，CSS Houdini 开放 CSS 的底层 API 给开发者，使得开发者可以通过这套接口自行扩展 CSS，并提供相应的工具允许开发者介入浏览器渲染引擎的样式和布局流程中，使开发人员可以编写浏览器可以解析的 CSS 代码，从而创建新的 CSS 功能。当然，它不是本文的重点，不过多描述。

CSS Property 如何使用呢？我们将通过一些简单的例子快速上手，并且着重介绍它在 CSS 动画中起到的关键性的作用，对 CSS 动画带来的巨大提升。

示例

正常而言，我们定义和使用一个 CSS 自定义属性的方法是这样的：

:root {
    --whiteColor: #fff;
}

p {
    color: (--whiteColor);
}
复制代码

而有了 @property 规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性：

<style>
@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

p {
    color: var(--property-name);
}
</style>
复制代码

简单解读下：

  • @property --property-name 中的 --property-name 就是自定义属性的名称，定义后可在 CSS 中通过 var(--property-name) 进行引用
  • syntax：该自定义属性的语法规则，也可以理解为表示定义的自定义属性的类型
  • inherits：是否允许继承
  • initial-value：初始值

其中，@property 规则中的 syntax 和 inherits 描述符是必需的。

当然，在 JavaScript 内定义的写法也很简单，顺便一提：

<script>
CSS.registerProperty({
  name: "--property-name",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee"
});
</script>
复制代码

支持的 syntax 语法类型

syntax 支持的语法类型非常丰富，基本涵盖了所有你能想到的类型。

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (a custom identifier string)

syntax 中的 +、#、| 符号

定义的 CSS @property 变量的 syntax 语法接受一些特殊的类型定义。

  • syntax: '<color#>' ：接受逗号分隔的颜色值列表
  • syntax: '<length+>' ：接受以空格分隔的长度值列表
  • syntax: '<length | length+>'：接受单个长度或者以空格分隔的长度值列表

OK，铺垫了这么多，那么为什么要使用这么麻烦的语法定义 CSS 自定义属性呢？CSS Houdini 定义的自定义变量的优势在哪里？下面我们一一娓娓道来。

使用 color syntax 语法类型作用于渐变

我们来看这样一个例子，我们有这样一个渐变的图案：

<div></div>
复制代码
div {
    background: linear-gradient(45deg, #fff, #000);
}
复制代码

我们改造下上述代码，改为使用 CSS 自定义属性：

:root {
    --colorA: #fff;
    --colorB: #000;
}
div {
    background: linear-gradient(45deg, var(--colorA), var(--colorB));
}
复制代码

我们再加上一个过渡效果：

:root {
    --colorA: #fff;
    --colorB: #000;
}
div {
    background: linear-gradient(45deg, var(--colorA), var(--colorB));
    transition: 1s background;
    
    &:hover {
        --colorA: yellowgreen;
        --colorB: deeppink;
    }
}
复制代码

看看鼠标 Hover 的时候，会发生什么：

虽然我们设定了 1s 的过渡动画 transition: 1s background，但是很可惜，CSS 是不支持背景渐变色的直接过渡变化的，我们得到的只是两帧之间的之间变化。

使用 CSS @property 进行改造

OK，接下来我们就是有本文的主角，使用 Houdini API 中的 CSS 自定义属性替换原本的 CSS 自定义属性。

简单进行改造一下，使用 color syntax 语法类型：

@property --houdini-colorA {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}
@property --houdini-colorB {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}
.property {
    background: linear-gradient(45deg, var(--houdini-colorA), var(--houdini-colorB));
    transition: 1s --houdini-colorA, 1s --houdini-colorB;
    
    &:hover {
        --houdini-colorA: yellowgreen;
        --houdini-colorB: deeppink;
    }
}
复制代码

我们使用了 @property 语法，定义了两个 CSS Houdini 自定义变量 --houdini-colorA 和 --houdini-colorB，在 hover 变化的时候，改变这两个颜色。

需要关注的是，我们设定的过渡语句 transition: 1s --houdini-colorA, 1s --houdini-colorB，在这里，我们是针对 CSS Houdini 自定义变量设定过渡，而不是针对 background 设定过渡动画，再看看这次的效果：

Wow，成功了，渐变色的变化从两帧的逐帧动画变成了补间动画，实现了从一个渐变色过渡到另外一个渐变色的效果！而这，都得益于 CSS Houdini 自定义变量的强大能力！

CodePen Demo -- CSS Houdini 自定义变量实现渐变色过渡动画

使用 CSS @property 实现渐变背景色过渡动画

在上述的 DEMO 中，我们利用了 CSS Houdini 自定义变量，将原本定义在 background 的过渡效果嫁接到了 color 之上，而 CSS 是支持一个颜色变换到另外一个颜色的，这样，我们巧妙的实现了渐变背景色的过渡动画。

在之前我们有讨论过在 CSS 中有多少种方式可以实现渐变背景色过渡动画 -- 巧妙地制作背景色渐变动画！，到今天，我们又多了一种实现的方式！


@property --colorA {
  syntax: '<color>';
  inherits: false;
  initial-value: fuchsia;
}
@property --colorC {
  syntax: '<color>';
  inherits: false;
  initial-value: #f79188;
}
@property --colorF {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}
div {
    background: linear-gradient(45deg,
        var(--colorA),
        var(--colorC),
        var(--colorF));
    animation: change 10s infinite linear;
}

@keyframes change {
    20% {
        --colorA: red;
        --colorC: #a93ee0;
        --colorF: fuchsia;
    }
    40% {
        --colorA: #ff3c41;
        --colorC: #e228a0;
        --colorF: #2e4c96;
    }
    60% {
        --colorA: orange;
        --colorC: green;
        --colorF: teal;
    }
    80% {
        --colorA: #ae63e4;
        --colorC: #0ebeff;
        --colorF: #efc371;
    }
}
复制代码

完整的代码可以戳这里：

CodePen Demo -- CSS Houdini 自定义变量实现渐变色过渡动画2

conic-gradient 配合 CSS @property 实现饼图动画

OK，上面我们演示了 syntax 为 color 语法类型的情况。在文章一开头，我们还列举了非常多的 syntax 类型。

下面我们尝试下其他的类型，使用 percentage 百分比类型或者 angle 角度类型，实现一个饼图的 hover 动画。

如果我们还是使用传统的写法，利用角向渐变实现不同角度的饼图：

<div></div>
复制代码
.normal {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(yellowgreen, yellowgreen 25%, transparent 25%, transparent 100%); 
    transition: background 300ms;
    
    &:hover {
        background: conic-gradient(yellowgreen, yellowgreen 60%, transparent 60.1%, transparent 100%); 
    }
}
复制代码

将会得到这样一种效果，由于 conic-gradient 也是不支持过渡动画的，得到的是一帧向另外一帧的直接变化：

好，使用 CSS Houdini 自定义变量改造一下：

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%;
}

div {
    background: conic-gradient(yellowgreen, yellowgreen var(--per), transparent var(--per), transparent 100%); 
    transition: --per 300ms linear;
    
    &:hover {
        --per: 60%;
    }
}
复制代码

CodePode Demo -- conic-gradient 配合 CSS @property 实现饼图动画

以往使用纯 CSS 非常复杂才能实现的效果，如果可以轻松的达成，不得不感慨 CSS @property 强大的能力！

syntax 的 | 符号

顺便演示一下定义 Houdini 自定义变量时 syntax 的一些稍微复杂点的用法。

在 conic-gradient 中，我们可以使用百分比也可以使用角度作为关键字，上述的 DEMO 也可以改造成这样：

@property --per {
  syntax: '<percentage> | <angle>';
  inherits: false;
  initial-value: 25%;
}
...
复制代码

表示，我们的自定义属性即可以是一个百分比值，也可以是一个角度值。

除了 | 符号外，还有 + 和 # 号分别表示接受以空格分隔、和以逗号分隔的属性，感兴趣的可以自行尝试。

使用 length 类型作用于一些长度变化

掌握了上述的技巧，我们就可以利用 Houdini 自定义变量的这个能力，去填补修复以前无法直接过渡动画的一些效果了。

过去，我们想实现这样一个文字下划线的 Hover 效果：

p {
    text-underline-offset: 1px;
    text-decoration-line: underline;
    text-decoration-color: #000;
    transition: all .3s;
    
    &:hover {
        text-decoration-color: orange;
        text-underline-offset: 10px;
        color: orange;
    }
}
复制代码

使用 Houdini 自定义变量改造，化腐朽为神奇：

@property --offset {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}
div {
    text-underline-offset: var(--offset, 1px);
	text-decoration: underline;
	transition: --offset 400ms, text-decoration-color 400ms;
    
    &:hover {
        --offset: 10px;
        color: orange;
	text-decoration-color: orange;
    }
}
复制代码

可以得到丝滑的过渡效果：

实战一下，使用 CSS @property 配合 background 实现屏保动画

嗯，因为 CSS @property 的存在，让以前需要非常多 CSS 代码的工作，一下子变得简单了起来。

我们尝试利用 CSS @property 配合 background，简单的实现一个屏保动画。

我们利用 background 可以简单的得到这样一个图形，代码如下：

html, body {
    width: 100%;
    height: 100%;
}
body {
    background-image:
        radial-gradient(
            circle at 86% 7%,
            rgba(40, 40, 40, 0.04) 0%,
            rgba(40, 40, 40, 0.04) 50%,
            rgba(200, 200, 200, 0.04) 50%,
            rgba(200, 200, 200, 0.04) 100%
        ),
        radial-gradient(
            circle at 15% 16%,
            rgba(99, 99, 99, 0.04) 0%,
            rgba(99, 99, 99, 0.04) 50%,
            rgba(45, 45, 45, 0.04) 50%,
            rgba(45, 45, 45, 0.04) 100%
        ),
        radial-gradient(
            circle at 75% 99%,
            rgba(243, 243, 243, 0.04) 0%,
            rgba(243, 243, 243, 0.04) 50%,
            rgba(37, 37, 37, 0.04) 50%,
            rgba(37, 37, 37, 0.04) 100%
        ),
        linear-gradient(rgb(34, 222, 237), rgb(135, 89, 215));
}
复制代码

在往常，我们想让它动起来，其实是需要费一定的功夫的，而现在，通过 CSS @property，对我们希望进行动画的一些元素细节进行改造，可以得到非常不错的动画效果：

body,
html {
    width: 100%;
    height: 100%;
}

@property --perA {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 75%;
}

@property --perB {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 99%;
}

@property --perC {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 15%;
}

@property --perD {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 16%;
}

@property --perE {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 86%;
}

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

body {
    background-image: 
        radial-gradient(
            circle at var(--perE) 7%,
            rgba(40, 40, 40, 0.04) 0%,
            rgba(40, 40, 40, 0.04) 50%,
            rgba(200, 200, 200, 0.04) 50%,
            rgba(200, 200, 200, 0.04) 100%
        ),
        radial-gradient(
            circle at var(--perC) var(--perD),
            rgba(99, 99, 99, 0.04) 0%,
            rgba(99, 99, 99, 0.04) 50%,
            rgba(45, 45, 45, 0.04) 50%,
            rgba(45, 45, 45, 0.04) 100%
        ),
        radial-gradient(
            circle at var(--perA) var(--perB),
            rgba(243, 243, 243, 0.04) 0%,
            rgba(243, 243, 243, 0.04) 50%,
            rgba(37, 37, 37, 0.04) 50%,
            rgba(37, 37, 37, 0.04) 100%
        ),
        linear-gradient(var(--angle), rgb(34, 222, 237), rgb(135, 89, 215));
    animation: move 30s infinite alternate linear;
}

@keyframes move {
    100% {
        --perA: 85%;
        --perB: 49%;
        --perC: 45%;
        --perD: 39%;
        --perE: 70%;
        --angle: 360deg;
    }
}
复制代码

效果如下（因为 Gif 上传大小限制，加快了速率，截取了其中一部分，简单做个示意）:

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/37660.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue项目分环境配置打包处理

vue项目分环境配置打包处理

vue项目分环境配置打包处理 目录 vue项目分环境配置打包处理 本地环境配置 生产环境配置 打包处理 打包配置处理&#xff08;扩展&#xff09; 本地环境配置 定义需要的变量&#xff0c;这里定义了各种变量标识&#xff0c;可参考使用&#xff0c;自定义项目需要的变量&…
阅读更多...
设计问卷调查有哪些技巧？

设计问卷调查有哪些技巧？

调查问卷可以很好地帮助我们进行市场调研&#xff0c;所以想要做出一份有效的调查问卷&#xff0c;首先要确定问卷的主题。明确的主题就是定基调&#xff0c;可以让我们的后续过程更加顺利。然后我们再开始进行题目的设置和问卷的设计等动作。不过&#xff0c;在问卷设计的过程…
阅读更多...
【js】【爬虫】fetch + sessionStorage 快速搭建爬虫环境及各种踩坑

【js】【爬虫】fetch + sessionStorage 快速搭建爬虫环境及各种踩坑

文章目录导读需求开发环境fetch介绍为什么选择fetchfetch的封装使用数据存储数据访问封装多页面处理方案数据过大&#xff0c;拆分处理参考资料导读 需求 一说爬虫&#xff0c;很多人都会向导python&#xff0c;不过&#xff0c;真正省心的方案&#xff0c;应当是通过js控制获…
阅读更多...
Reactive源码分析

Reactive源码分析

Reactive用来绑定引用数据类型, 例如对象和数组等,实现响应式。 Reactive API 接口 export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>相关API包括readonly、createReactiveObject、shallowReadonly、isReactive、toReactive。源码运…
阅读更多...
Eureka注册中心

Eureka注册中心

文章目录一、认识服务提供者和服务调用者二、Eureka 的工作流程三、服务调用出现的问题及解决方法四、搭建 eureka-server五、注册 user-service、order-service六、在 order-service 完成服务拉取&#xff08;order 模块能访问 user 模块&#xff09;七、配置远程服务调用八、…
阅读更多...
从入门到进阶！当下火爆的大数据技术及算法怎么还能不知道 一起来学习互联网巨头的大数据架构实践！

从入门到进阶！当下火爆的大数据技术及算法怎么还能不知道 一起来学习互联网巨头的大数据架构实践！

大数据被称为新时代的黄金和石油&#xff0c;相关技术发展迅猛,所应用的行业也非常广泛&#xff0c;从传统行业如医疗、教育、金融、旅游&#xff0c;到新兴产业如电商、计算广告、可穿戴设备、机器人等。大数据技术更是国家科技发展和智慧城市建设的基础。 当前“互联网”新业…
阅读更多...
骨传导耳机是怎么传声的？骨传导耳机会伤害耳朵吗？

骨传导耳机是怎么传声的？骨传导耳机会伤害耳朵吗？

作为一个耳机发烧友&#xff0c;平时最喜欢的就是捣鼓耳机。这几年入手了几十款耳机&#xff0c;头戴式、入耳式、半入耳、有线无线都会接触一些来玩&#xff0c;其中还有骨传导耳机这个相对小众的款类。 说到骨传导耳机&#xff0c;我应该算是最早一批的用户了&#xff0c;很…
阅读更多...
web网页设计—— 指环王：护戒使者(13页) 电影网页设计 在线电影制作 个人设计web前端大作业

web网页设计—— 指环王：护戒使者(13页) 电影网页设计 在线电影制作 个人设计web前端大作业

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 文章目录一、网页介绍一…
阅读更多...
数据结构-ArrayList解析和实现代码

数据结构-ArrayList解析和实现代码

arrayList结构的实现是数组结构&#xff0c;数组没有扩容机制&#xff0c;arrayList的扩容机制采用的是复制数组&#xff0c;了解你会发现ArrayList虽然实现比较简单&#xff0c;但是设计还是很巧妙的。咱们先来简单实现下.. 咱们看下定义的全局变量 1.默认初始化空间为10&am…
阅读更多...
docker 安装 Jenkins

docker 安装 Jenkins

一、Jenkins 安装 增加挂载目录和权限 # 增加挂载目录和权限mkdir /workspace/jenkins_homechown -R 1000:1000 /workspace/jenkins_home/创建容器 docker run --name jenkins -d \ -p 9999:8080 \ -p 8888:8888 \ -p 50000:50000 \ -v /workspace/jenkins_home:/var/jenkins…
阅读更多...
[附源码]java毕业设计智慧教室预约

[附源码]java毕业设计智慧教室预约

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
java检验mp4文件完整性的一个方法：使用ffmpeg

java检验mp4文件完整性的一个方法：使用ffmpeg

问题引入 最近笔者在写一个多线程下载视频文件的程序&#xff0c;打算让这个程序在我的空闲服务器上运行&#xff0c;但是几轮测试之后发现&#xff0c;有时候会存在下载的视频文件不完整的情况&#xff0c;这就导致了有些文件无法正常播放 问题排查 经过一周的排查后&#…
阅读更多...
小白学流程引擎-FLowable(一) —FLowable是什么

小白学流程引擎-FLowable(一) —FLowable是什么

小白学流程引擎-FLowable(一) | FLowable是什么 一、什么是流程引擎&#xff1f; 通俗的说&#xff0c;流程引擎就是多种业务对象在一起合作完成某件事情的步骤&#xff0c;把步骤变成计算机能理解的形式就是流程引擎。 流程引擎&#xff0c;用来驱动业务按照设定的固定流程…
阅读更多...
《Kafka 源码实战》看完面试不慌！

《Kafka 源码实战》看完面试不慌！

Kafka 一开始是 LinkedIn 公司开发的消息队列&#xff0c;随着 Kafka 代码被贡献给 Apache 软件基金会后&#xff0c;就成功孵化成 Apache 顶级项目&#xff0c;世界上有越来越多的公司和个人开始使用 Kafka&#xff0c;所以 Kafka 使用的范围是很普遍的。 同时&#xff0c;值得…
阅读更多...
vue实现文件上传压缩优化处理

vue实现文件上传压缩优化处理

vue js实现文件上传压缩优化处理 两种方法 &#xff1a; 第1种是借助canvas的封装的文件压缩上传第2种&#xff08;扩展方法&#xff09;使用compressorjs第三方插件实现 目录 vue js实现文件上传压缩优化处理 借助canvas的封装的文件压缩上传 1.新建imgUpload.js 2.全局引…
阅读更多...
grafana变量使用

grafana变量使用

注&#xff1a;基于Grafana v8.3.6编写 1 添加变量 在dashboard界面点击setting&#xff0c;就能进入设置页面&#xff0c; 再点击Variables tab&#xff0c;就可以添加变量 比如我们添加一个系统架构的变量&#xff0c;用于区分Linux和Windows系统&#xff0c;通过node_una…
阅读更多...
这可能是2022年把微服务讲的最全了：SpringBoot+Cloud+Docker

这可能是2022年把微服务讲的最全了：SpringBoot+Cloud+Docker

前言 最近几年&#xff0c;微服务可谓是大行其道。在业务模型不完善&#xff0c;超大规模流量的冲击的情况下&#xff0c;许多企业纷纷抛弃了传统的单体架构&#xff0c;拥抱微服务。这种模式具备独立开发、独立部署、可扩展性、可重用性的优点的同时&#xff0c;也带来这样一…
阅读更多...
【云原生】K8S master节点更换IP以及master高可用故障模拟测试

【云原生】K8S master节点更换IP以及master高可用故障模拟测试

文章目录一、前言二、配置 多个master 节点1&#xff09;节点信息1&#xff09;安装docker或containerd2&#xff09;安装kubeadm&#xff0c;kubelet和kubectl1、配置k8s yum源2、修改sandbox_image 镜像源3、配置containerd cgroup 驱动程序systemd4、开始安装kubeadm&#x…
阅读更多...
SpringBoot SpringBoot 原理篇 1 自动配置 1.7 bean 的加载方式【五】

SpringBoot SpringBoot 原理篇 1 自动配置 1.7 bean 的加载方式【五】

SpringBoot 【黑马程序员SpringBoot2全套视频教程&#xff0c;springboot零基础到项目实战&#xff08;spring boot2完整版&#xff09;】 SpringBoot 原理篇 文章目录SpringBootSpringBoot 原理篇1 自动配置1.7 bean 的加载方式【五】1.7.1 register1 自动配置 1.7 bean 的…
阅读更多...
FAIRNESS IN MACHINE LEARNING: A SURVEY 阅读笔记

FAIRNESS IN MACHINE LEARNING: A SURVEY 阅读笔记

论文链接 刚读完一篇关于机器学习领域研究公平性的综述&#xff0c;这篇综述想必与其有许多共通之处&#xff0c;重合部分不再整理笔记&#xff0c;可详见上一篇论文的笔记&#xff1a; A Survey on Bias and Fairness in Machine Learning 阅读笔记_Catherine_he_ye的博客 S…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023