CSS：渐变画新式，引为最佳😤，何人不服？

哇偶web
153 阅读5分钟

@property.gif

一、开章

若教诸君实现这般动画（悬停时文字滑动且颜色渐变），诸君当如何下笔？且容十秒思量。

且看诸君所思之法，代码可还有精进余地？或另有蹊径？又或所成效果可如丝帛般顺滑？甚或全然不知从何着手罢！

今且示此博客所载之法，诸君且观：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@property</title>
  </head>
  <style>
    @property --c1 {
      syntax: "<color>";
      inherits: false;
      initial-value: rgb(224, 236, 236);
    }
    @property --c2 {
      syntax: "<color>";
      inherits: false;
      initial-value: rgb(92, 198, 162);
    }
     @property --c3 {
      syntax: "<color>";
      inherits: true;
      initial-value: rgb(238, 121, 4);
    }
    @property --l {
      syntax: "<length> | <percentage>";
      inherits: false;
      initial-value: 5px;
    }
    @property --angle {
      syntax: "<angle>";
      inherits: false;
      initial-value: 0deg;
    }
    .container {
      height: 350px;
      width: 500px;
      background: rgb(248, 247, 244);
      border-radius: 30px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin: 100px auto;
      overflow: hidden;

      & .text-area {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 250px;
        line-height: 250px;

        & rt {
          font-size: 50px;
          color: var(--c3);
        }
      }

      & .text-area:has(:hover, :focus) ruby {
        transform: translateX(-250px);
        --c1: red;
        --c2: transparent;
        --c3: black;
        --l: 100%;
        --angle: 180deg;
      }

      & .text-area ruby {
        transform: translateX(0);
        background: repeating-linear-gradient(
        var(--angle),
        var(--c1),
        var(--c1) 5px,
        var(--c2) var(--l),
        var(--c2) 6px
      );
      background-clip: text;
      color: transparent;
      background-size: 20% 20%;
      transition: --l, --angle, --c1, --c2, --c3, background-size, transform 1.5s ease-in-out;
      transition-duration: 1.5s;
      }
    }
  </style>
  <body>
    <div class="container">
      <div class="text-area">
        <ruby>大<rt>da</rt></ruby>
        <ruby>可<rt>sha</rt></ruby>
        <ruby>爱<rt>bi</rt> </ruby>
      </div>
    </div>
  </body>
</html>

若观此代码竟无半分疑惑，当为诸君击节称赞👍！此时不妨阖页而去，毋需在此虚掷光阴。

～～～～～～刀劈斧斫之分野～～～～～～～

二、要义所在：@property

@property是CSS提供的一个API，它允许开发者显式地定义他们的CSS 自定义属性，允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。

@property 规则提供了一个直接在样式表中注册自定义属性的方式，而无需运行任何 JS 代码。有效的 @property 规则会注册一个自定义属性，可以跟CSS变量一样被直接调用和赋值。

@property者，乃CSS所赐之利器，许人明定(显式地定义)其自定义属性，可验类型、设初值、定传承。

此规则直如户籍造册(直接在样式表中注册自定义属性)，不假JS之力而自成一统。凡有效之@property，皆可如寻常属性般呼之即来，挥之即去。亦可如 CSS变量 一样被直接调用和赋值。

@property语法

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

此规则乃自定义属性之牒谱，既可作变量使，亦能如CSS属性width、height等正途属性般行走江湖。

代码剖解

@property --c1 {
    syntax: "<color>";
    inherits: false;
    initial-value: rgb(224, 236, 236);
  }
  @property --c2 {
    syntax: "<color>";
    inherits: false;
    initial-value: rgb(92, 198, 162);
  }
   @property --c3 {
    syntax: "<color>";
    inherits: true;
    initial-value: rgb(238, 121, 4);
  }
  @property --l {
    syntax: "<length> | <percentage>";
    inherits: false;
    initial-value: 5px;
  }
  @property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

定义四个CSS自定义属性，此四者，三色一数一角，皆备后用。

& rt {
    font-size: 50px;
    color: var(--c3);
}

--c3者，注音文字之色相也。

& .text-area ruby {
	  transform: translateX(0);
	  background: repeating-linear-gradient(var(--angle),
	      var(--c1),
	      var(--c1) 5px,
	      var(--c2) var(--l),
	      var(--c2) 6px);
	  background-clip: text;
	  color: transparent;
	  background-size: 20% 20%;
	  transition: --l, --angle, --c1, --c2, --c3, transform 1.5s ease-in-out;
	  transition-duration: 1.5s;
}

& .text-area:has(:hover, :focus) ruby {
      transform: translateX(-250px);
      --c1: red;
      --c2: transparent;
      --c3: black;
      --l: 100%;
      --angle: 180deg;
}

当鼠矢悬于文字之上：

  • 一者，transform: translateX(0)令文字左徙（覆其常态 transform: translateX(0)）
  • 二者，五路属性皆易其值，transition: --l, --angle, --c1, --c2, --c3, transform 1.5s ease-in-out 遂令诸值渐次更迭（从初始值过渡到重新赋的值）。

由是得见:hover悬停时文字与注音颜色渐变之妙。

三、旁征博引

1、标签

<ruby> 元素者，东亚文字注音之器也。<rt>乃注音之本。他日若遇注音之事，当思此物。

2、transition属性

过渡者，元素易形之桥梁也。亦可令多属性渐次而变，以逗点分隔之。（transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。）

transition: --l, --angle, --c1, --c2, --c3, transform 1.5s ease-in-out 亦可作如下简写：

ts.png

亦证@property所定属性，如width、height可为transition-property所用。

3、文字背景

background-clip者，裁背景于边框、内边距、内容之下。若取text值，则背景尽入文字轮廓之中。（background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。当值为text ，背景被裁剪成文字的前景色。）

	  background-clip: text;
	  color: transparent;

四、终章

诸君可曾领悟其中奥妙乎？（你学废了吗？）

此例既显CSS自定义属性在繁复动画中之妙用，亦辨其与寻常 CSS变量 之别。寻常变量宜于代码维护与简单技法，然遇复合属性中独立值更易（如渐变色之单色），@property以语法定义、初始值、传承之能，遂成不二法门。既可削代码之繁冗，又为精妙动画辟新径。

@property乃处理独立值动画时不可或缺之利器，凡需精细调控动画参数者，当奉为上宾。

avatar
文章
阅读
粉丝