自定义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中进行切换,如下所示

相关推荐
sasaraku.7 分钟前
serviceWorker缓存资源
前端
RadiumAg1 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo1 小时前
ES6笔记2
开发语言·前端·javascript
yanlele1 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子3 小时前
React状态管理最佳实践
前端
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子3 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码4 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw54 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app