logo
blog
readme
Back to Blog
Back to Blog
Back to Blog

‌

‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌

© 2025 linzhe. All rights reserved.

TODO:编辑

使用css自定义属性实现动画

1、定义属性名

css
style.css
@property --gradient-end {
  syntax: '<percentage>';
  initial-value: 10%;
  inherits: false;
}

2、编写动画

css
style.css
/* 抛光动画 */
@keyframes gradientAnimation {
  0% {
    --gradient-end: 10%;
  }
  50% {
    --gradient-end: 90%;
  }
  100% {
    --gradient-end: 10%;
  }
}

.gradient {
  background-image: linear-gradient(
    to right,
    rgba(74, 222, 128, 1) 0%,
    white var(--gradient-end),
    rgba(74, 222, 128, 1) 100%
  );
  animation: gradientAnimation 2s infinite;
}

3、动画效果如下