css中使用@property自定义属性,实现闪烁渐变背景【2024新属性】

news2024/11/15 6:46:33

自 2024 年 7 月起,此功能适用于最新的设备和浏览器版本。此功能可能无法在较旧的设备或浏览器中使用。

@property 是 CSS 中一个相对较新的功能,主要用于定义自定义属性(即 CSS 变量)的类型、继承性以及初始值。它允许开发者更好地控制和利用 CSS 自定义属性,尤其是在动画、过渡等动态场景中。

它也是Houdini API中的一种,Houdini 是一组底层 API,它们使开发人员可以直接访问 CSS 对象模型(CSSOM),使开发人员可以编写浏览器可以解析为 CSS 的代码,从而创建新的 CSS 功能。

1. @property语法

@property --property-name {
  syntax: "<data-type>";
  inherits: true | false;
  initial-value: value;
}

--property-name自定义属性的名称,以 -- 开头。
syntax定义该属性的值类型。可以使用 CSS 类型标识符,如 <color><length><number> 等,也可以使用更复杂的类型定义。
inherits:指定该属性是否会继承自父元素,true 表示会继承,false 表示不会继承。
initial-value:指定该属性的初始值。如果在使用时没有显式指定值,则会使用该初始值。

/* 定义自定义属性 --box-size 作为长度类型 */
@property --box-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 100px;
}

/* 使用自定义属性 */
.box{
  width: var(--box-size);
  height: var(--box-size);
}

2. 案例1:闪烁渐变背景

请添加图片描述

<div class="card"></div>
/* 自定义属性 */
/* 使用了@property规则,其中 syntax: "<color>" 指定了这些属性应该存储颜色值。 */
/* 这些属性不会继承 (inherits: false) 并且有初始值 (initial-value)。 */
@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffbbc0;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0aecb;
}

.card {
  margin: 12px;
  border-radius: 24px;
  width: 400px;
  height: 300px;
  padding: 2rem;
  /* 使用了两个 radial-gradient (径向渐变)来定义背景颜色 */
  background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2),
      transparent 100% 100%
    ),
    radial-gradient(
      farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%,
      var(--card-bg) 100%
    );

  /* 将两种渐变进行颜色混合 */
  background-blend-mode: color-burn;

  /* 为卡片的背景色设置了两个不同的动画效果 */
  /* alternate:两个动画都是线性且无限循环的,并在每次动画结束时反向播放 */
  animation: animate-color-1 8s infinite linear alternate,
    4s animate-color-2 1s infinite linear alternate;
}

@keyframes animate-color-1 {
  from {
    --shine-1: initial;
  }
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  from {
    --shine-2: initial;
  }
  to {
    --shine-2: hotpink;
  }
}

3. 案例2:尺寸变化动画

请添加图片描述

 <div class="box"></div>
/* 定义自定义属性 --box-size 作为长度类型 */
@property --box-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 100px;
}

/* 定义自定义属性 --box-rotation 作为数字类型 */
@property --box-rotation {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* 定义动画效果 */
@keyframes resize-box {
  from {
    --box-size: 100px;
  }
  to {
    --box-size: 200px;
  }
}

@keyframes rotate-box {
  from {
    --box-rotation: 0;
  }
  to {
    --box-rotation: 360;
  }
}

/* 应用自定义属性及动画 */
.box {
  width: var(--box-size);
  height: var(--box-size);
  background-color: lightcoral;
  transform: rotate(var(--box-rotation) deg);
  animation: resize-box 5s infinite alternate, rotate-box 10s infinite linear;
  border-radius: 1rem;
  margin: 20px;
}

4. 浏览器是否支持@property

在这里插入图片描述

参考文档:
🔍MDN:@property
🔍The @property Rule
🔍@property:新一代 CSS 变量现已支持通用浏览器

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

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

相关文章

linux使用nginx部署springboot + vue分离项目

第一步,打包后端项目 maven打包springboot项目为jar文件,上传到服务器,然后运行此jar,具体操作参考: centos部署jar包_centos jar 静态资源文件-CSDN博客 第二步,安装nginx 具体操作自行查找,相关命令: 启动: /usr/local/nginx/sbin/nginx 重新加载配置: /usr…

[数据集][目标检测]木材缺陷检测数据集VOC+YOLO格式2383张10类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2383 标注数量(xml文件个数)&#xff1a;2383 标注数量(txt文件个数)&#xff1a;2383 标注…

PyQt5基础控件

一、按钮 (一)普通按钮QPushButton 1.创建按钮控件 QPushButton()&#xff1a;创建一个无父控件的按钮控件QPushButton(parent)&#xff1a;创建控件的同时, 设置父控件QPushButton(text, parent)&#xff1a;创建控件的同时, 设置提示文本和父控件QPushButton(icon, text, …

自定义组件上传到maven中央仓库2024实测可用最详细版

自 2024 年 3 月 12 日起&#xff0c;官方调整了发布的方式&#xff0c;所有发布都必须通过中央门户&#xff0c;以往老方式可能不适用&#xff0c;以下记录2024新版上传发布方式 注册sonatype账号 Maven中央仓库并不支持直接发布jar包&#xff0c;sonatype是其指定的第三方仓…

【Python】函数进阶(上)

本篇文章将讲解函数进阶的知识&#xff1a; &#xff08;1&#xff09;函数的补充 &#xff08;2&#xff09;函数名是什么 &#xff08;3&#xff09;返回值和print &#xff08;4&#xff09;函数的作用域 1、函数的补充 &#xff08;1&#xff09;参数内存地址相关 如何查…

【算法专题】滑动窗口类

个人主页&#xff1a;CSDN_小八哥向前冲~ 所属专栏&#xff1a;算法基础入门 目录 长度最小的子数组 无重复字符的最长子串 最大连续1的个数 将x减到0的最小操作数 水果成篮 找到字符串中所有字母异位词 最小覆盖字串 长度最小的子数组 题目&#xff1a;【LeetCode】长度…

Python生成432Hz音频

使用 numpy 来生成信号&#xff0c; 使用 matplotlib 可视化信号&#xff0c; 使用 sounddevice 播放声音。 以下生成和播放 432 Hz 的正弦波信号&#xff1a; import numpy as np import sounddevice as sd import matplotlib.pyplot as plt# 生成单音函数 def generate_to…

订单完工数量超过了最大可完工数量

本次完工将造成订单YWS-24070027产出实际完工数量达到了6093.000000000&#xff0c;超过了最大可完工数量5000.000000000 一个成品入库单被它们玩坏了。生产不知道生产了什么。PMC不知道要入库什么。鸡同鸭天天开会之后结果就是单据重复的开立&#xff0c;删除&#xff0c;开立…

C++ TinyWebServer项目总结(5. Linux网络编程基础API)

还是给我的语雀文档打个广告&#xff1a; 《5. C TinyWebServer项目总结&#xff08;5. Linux网络编程基础API&#xff09;》我的文章都是先在语雀里记录的&#xff0c;然后再同步发送到CSDN上&#xff0c;有些格式问题实在是懒得改了&#xff0c;可能会导致大家看的不舒服&…

自行车制造5G智能工厂工业物联数字孪生平台,推进制造业数字化

在当今这个日新月异的数字化时代&#xff0c;制造业正经历着前所未有的变革&#xff0c;自行车制造5G智能工厂工业物联数字孪生平台的兴起&#xff0c;无疑是这场转型浪潮中一股强劲力量。自行车制造5G智能工厂工业物联数字孪生平台的成功应用&#xff0c;不仅仅是技术上的突破…

代码随想录DAY21 - 二叉树 - 08/20

目录 修建二叉搜索树 题干 思路和代码 递归法 迭代法 将有序数组转化为平衡二叉搜索树 题干 思路和代码 递归法 递归优化 迭代法 把二叉搜索树转换为累加树 题干 思路和代码 递归法 迭代法 修建二叉搜索树 题干 题目&#xff1a;给你二叉搜索树的根节点 root …

数据结构【顺序结构二叉树:堆】(1)

​​​​​​​ &#x1f31f;个人主页&#xff1a;落叶 目录 ​ &#x1f525;树的概念与结构​​​​​​​ &#x1f525;树的表⽰ &#x1f525;孩⼦兄弟表⽰法&#xff1a; &#x1f525;树形结构实际运⽤场景 &#x1f525;⼆叉树 &#x1f525;概念与结构 &…

day4JS-数组

1. 什么是数组 数组是值的有序集合。每个值叫做一个元素。每个元素在数组中有一个位置, 以数字表示,称为索引 (有时也称为下标)。数组的元素可以是任何类型。数组索引从 0 开始,数组最大能容纳 4294967295 个元素。 2. 数组的声明与使用 2.1 使用字面量的方式声明数组 语法…

Minio web控制台实现授权管理

启动minio ./minio server /data01/aidacp/apps/minio/data --config-dir /data01/aidacp/apps/minio/conf --address 127.0.0.1:19090 --console-address 127.0.0.1:19091 &WARNING: Detected Linux kernel version older than 4.0.0 release, there are some known pote…

建设项目跟踪与展示系统

这是在翻旧文件时翻到的16年写的一个项目 建设项目跟踪与展示系统 建设方案 一、系统建设目的及意义 建设工程项目进度控制的最终目的是确保建设项目按预定的时间完成。能否在预定的时间内交付使用&#xff0c;直接影响到投资效益。为解决施工组织过程中存在问题&#xff0c;…

PyTorch深度学习实战(25)—— 使用向量化思想解决实际问题

本文将实际应用向量化思想解决深度学习中的几个经典问题,读者可以在这些示例中进一步领悟向量化思想和高级索引思想。 1. Box_IoU Box_IoU是目标检测任务中最基本的评价指标。简单来说,Box_IoU就是模型预测的检测结果框(predicted bbox)与原始标记框(ground truth)之间的…

企业级Nginx源码安装及其实战讲解

一&#xff1a;web服务基础介绍 1.1Web服务介绍 Apache 经典的 Web 服务端 Apache起初由美国的伊利诺伊大学香槟分校的国家超级计算机应用中心开发 目前经历了两大版本分别是1.X和2.X 其可以通过编译安装实现特定的功能 Apache prefork 模型 预派生模式&#xff0c;有一个…

[C++进阶]map和set

一、关联式容器 STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身。 那什么是关联式容器&#xff1f;它与序列式容器…

2.复杂度分析

2.1 算法效率评估 在算法设计中&#xff0c;我们先后追求以下两个层面的目标。 找到问题解法&#xff1a;算法需要在规定的输入范围内可靠地求得问题的正确解。寻求最优解法&#xff1a;同一个问题可能存在多种解法&#xff0c;我们希望找到尽可能高效的算法。 也就是说&a…

JavaScript_7_练习:随机抽奖案例

效果图 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>练习&#xff1a;随机抽奖案例</tit…