自定义CSS属性(@property)解决自定义CSS变量无法实现过渡效果的问题

且看下面的代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demot</title>
  </head>
  <body>
    <div class="demoBox"></div>
  </body>
  <style>
    :root {
      --height: 100px;
    }
    @property --width {
      syntax: "<length>";
      inherits: false;
      initial-value: 100px;
    }
    .demoBox {
      width: var(--width);
      height: var(--height);
      background-image: linear-gradient(45deg, red, blue);
      animation: run 2s infinite alternate;
      transition: all 1s;
    }
    @keyframes run {
      from {
        --width: 100px;
        --height: 100px;
      }
      to {
        --width: 200px;
        --height: 200px;
      }
    }
  </style>
</html>

在上面的代码中,通过自定义属性的--width能够在100px到200px中实现过渡效果;自定义变量--height只能在100px与200px中进行切换,如下所示

相关推荐
秋天的一阵风2 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风3 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
Tech Synapse14 分钟前
电商商品推荐系统实战:基于TensorFlow Recommenders构建智能推荐引擎
人工智能·python·tensorflow
工呈士21 分钟前
CSS布局实战:Flexbox 与 Grid 精髓解析
css·面试·flexbox
海底火旺23 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺23 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码24 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou25 分钟前
组件测试
前端
JustHappy27 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可41 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin