css3 @property

最新推荐文章于 2024-08-20 13:54:32 发布

HebyH_

最新推荐文章于 2024-08-20 13:54:32 发布

阅读量387

点赞数

文章标签： css3 ue4 前端

本文链接：https://blog.csdn.net/m0_45159572/article/details/121225033

版权

本文介绍了CSS的@property规则，允许我们定义自定义属性并指定其语法、继承性和初始值。通过将自定义属性声明为颜色类型，可以实现颜色的动画过渡。例如，原本无法动画化的颜色渐变现在可以通过变量实现。在示例中，通过@property定义了一个名为--gradient-start的颜色属性，应用于元素背景渐变，并成功创建了过渡动画。

摘要由CSDN通过智能技术生成

语法

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

syntax：语法
@property --my-color：声明一个自定义属性 --mycolor
inherits：是否允许继承
initial-value：初始值

@property 规则中 syntax 和 inherits 描述符是必需的; 如果其中任何一项缺失, 整条规则都将失效并且会被忽略。 initial-value 描述符仅在syntax描述符为通用syntax定义时是可选的，否则initial-value也是必需的——如果此时该描述符缺失,整条规则都将失效且被忽略。

"<length>":长度

Any valid <length> value

"<number>":数字

<number> values

"<percentage>":百分比

Any valid <percentage> value

"<length-percentage>":长度百分比

Any valid <length> or <percentage> value, any valid <calc()> expression combining <length> and <percentage> components.

"<color>":颜色

Any valid <color> value

"<image>":图像

Any valid <image> value

"<url>":链接

Any valid <url> value

"<integer>":整数

Any valid <integer> value

"<angle>":角的大小

Any valid <angle> value

"<time>":时间

Any valid <time> value

"<resolution>":单位

Any valid <resolution> value

"<transform-function>":变化方法(常用于2D)

Any valid <transform-function> value

"<custom-ident>":自定义字符串标识符

Any valid <custom-ident> value

作用

当我们想要背景从白色到红色的渐变,一般来说我们会先这么写,但是没有生效

.el {
  background: linear-gradient(white, black);
  /* this transition won't work */
  transition: 1s;
}
.el:hover {
  background: linear-gradient(red, black);
}

所以我们用新的渐变颜色在伪元素中褪色，或者用比元素渐变更宽的背景位置来伪造它。

但是现在我们可以这样做了：

@property --gradient-start {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}
.el {
  --gradient-start: white;
  background: linear-gradient(var(--gradient-start), black);
  transition: --gradient-start 1s;
}
.el:hover {
  --gradient-start: red;
}

因为我们告诉 CSS 这个自定义属性是一个 <color> ，所以它可以被处理或者动画化。之前的颜色值是无法被动画化的

详细可以学习CSS Properties and Values API Level 1https://drafts.css-houdini.org/css-properties-values-api-1/