自定义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 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
咖啡の猫3 小时前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳3 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng4 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪4 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛4 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能4 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost4 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu4 小时前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程
云中雾丽5 小时前
react-checkbox的封装
前端