怎么使用CSS变量实现心动效果

/* 不使用CSS变量 */  .title {      background-color: red;  }  .desc {      background-color: red;  }  /* 使用CSS变量 */  :root {      --bg-color: red;  }  .title {      background-color: var(--bg-color);  }  .desc {      background-color: var(--bg-color);  }

["red", "blue", "green"].forEach(v => {      const btn = document.getElementById(`${v}-theme-btn`);      btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v));  });

以下所有演示代码基于Vue文件，但HTML、CSS和JS分开书写，为了简化CSS的书写而使用Sass进行预处理，方便代码演示

.loading {      width: 200px;      height: 200px;      li {          border-radius: 3px;          width: 6px;          height: 30px;          background-color: #f66;          animation: beat 1s ease-in-out infinite;          & + li {              margin-left: 5px;          }          &:nth-child(2) {              animation-delay: 200ms;          }          &:nth-child(3) {              animation-delay: 400ms;          }          &:nth-child(4) {              animation-delay: 600ms;          }          &:nth-child(5) {              animation-delay: 800ms;          }          &:nth-child(6) {              animation-delay: 1s;          }      }  }

.strip-loading {      width: 200px;      height: 200px;      li {          --time: calc((var(--line-index) - 1) * 200ms);          border-radius: 3px;          width: 6px;          height: 30px;          background-color: #f66;          animation: beat 1.5s ease-in-out var(--time) infinite;          & + li {              margin-left: 5px;          }      }  }

源码链接可在文章结尾处获取

/* flex属性无效 */  .loading {      display: flex;      align-items: center;      flex: var(--line-index);  }

.heart-loading {      width: 200px;      height: 200px;      ul {          display: flex;          justify-content: space-between;          width: 150px;          height: 10px;      }      li {          --Θ: calc(var(--line-index) / var(--line-count) * .5turn);          --time: calc((var(--line-index) - 1) * 40ms);          border-radius: 5px;          width: 10px;          height: 10px;          background-color: #3c9;          filter: hue-rotate(var(--Θ));          animation-duration: 1s;          animation-delay: var(--time);          animation-iteration-count: infinite;      }      .line-1,      .line-9 {          animation-name: line-move-1;      }      .line-2,      .line-8 {          animation-name: line-move-2;      }      .line-3,      .line-7 {          animation-name: line-move-3;      }      .line-4,      .line-6 {          animation-name: line-move-4;      }      .line-5 {          animation-name: line-move-5;      }  }

源码链接可在文章结尾处获取

            
                        内容{{i + 1}}                
  

.tab-navbar {      display: flex;      overflow: hidden;      flex-direction: column-reverse;      border-radius: 10px;      width: 300px;      height: 400px;      nav {          display: flex;          height: 40px;          background-color: #f0f0f0;          line-height: 40px;          text-align: center;          a {              flex: 1;              cursor: pointer;              transition: all 300ms;              &.active {                  background-color: #66f;                  font-weight: bold;                  color: #fff;              }          }      }      div {          flex: 1;          ul {              --tab-index: 0;              --tab-width: calc(var(--tab-count) * 100%);              --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);              display: flex;              flex-wrap: nowrap;              width: var(--tab-width);              height: 100%;              transform: translate3d(var(--tab-move), 0, 0);              transition: all 300ms;          }          li {              display: flex;              justify-content: center;              align-items: center;              flex: 1;              background-color: var(--bg-color);              font-weight: bold;              font-size: 20px;              color: #fff;          }      }  }

exportdefault {      data() {          return {              index: 0,              list: ["#f66", "#09f", "#3c9"]          };      },      methods: {          select(i) {              this.index = i;              this.$refs.tabs.style.setProperty("--tab-index", i);          }      }  };

源码链接可在文章结尾处获取

在

上定义--tab-index表示Tab当前的索引，当点击按钮时重置--tab-index的值，就可实现不操作DOM来移动
的位置显示指定的Tab。不操作DOM而可移动
是因为定义了--tab-move，通过calc()计算--tab-index与--tab-move的关系，从而操控transform: translate3d()来移动
。

另外在

• 上定义--bg-color表示Tab的背景色，也是一种比较简洁的模板赋值方式，总比写
• 要好看。如果多个CSS属性依赖一个变量赋值，那么使用「CSS变量」赋值到style上就更方便了，那些CSS属性可在CSS文件里进行计算与赋值，这样可帮助JS分担一些属性计算工作。

  当然，这个标签导航栏也可通过纯CSS实现，有兴趣的同学可看看笔者之前一篇文章里的纯CSS标签导航栏。

  悬浮跟踪按钮

  通过几个栗子实践了「CSS变量」在CSS和JS上的运用，相信大家已经掌握了其用法和技巧。之前在某个网站看过一个比较酷炫的鼠标悬浮特效，好像也是使用「CSS变量」实现的。笔者凭着记忆也使用「CSS变量」实现一番。

  其实思路也比较简单，先对按钮进行布局和着色，然后使用伪元素标记鼠标的位置，定义--x和--y表示伪元素在按钮里的坐标，通过JS获取鼠标在按钮上的offsetLeft和offsetLeft分别赋值给--x和--y，再对伪元素添加径向渐变的背景色，大功告成，一个酷炫的鼠标悬浮跟踪特效就这样诞生了。

  

        妙用CSS变量，让你的CSS变得更心动  

  .track-btn {      display: block;      overflow: hidden;      border-radius: 100px;      width: 400px;      height: 50px;      background-color: #66f;      line-height: 50px;      cursor: pointer;      font-weight: bold;      font-size: 18px;      color: #fff;      span {          position: relative;      }      &::before {          --size: 0;          position: absolute;          left: var(--x);          top: var(--y);          width: var(--size);          height: var(--size);          background-image: radial-gradient(circle closest-side, #09f, transparent);          content: "";          transform: translate3d(-50%, -50%, 0);          transition: all 200ms ease;      }      &:hover::before {          --size: 400px;      }  }

  exportdefault {      name: "track-btn",      methods: {          move(e) {              const x = e.pageX - e.target.offsetLeft;              const y = e.pageY - e.target.offsetTop;              e.target.style.setProperty("--x", `${x}px`);              e.target.style.setProperty("--y", `${y}px`);          }      }  };

  源码链接可在文章结尾处获取

  其实可结合鼠标事件来完成更多的酷炫效果，例如动画关联、事件响应等操作。没有做不到，只有想不到，尽情发挥你的想象力啦。

  之前在CodePen上还看到一个挺不错的栗子，一个悬浮视差按钮，具体代码涉及到一些3D变换的知识。看完源码后，按照其思路自己也实现一番，顺便对代码稍加改良并封装成Vue组件，存放到本课件示例代码中。感觉录制的GIF有点别扭，显示效果不太好，有兴趣的同学可下载本课件示例代码，自己运行看看效果。

  兼容

  对于现代浏览器来说，「CSS变量」的兼容性其实还是蛮好的，所以大家可放心使用。毕竟现在都是各大浏览器厂商快速迭代的时刻，产品对于用户体验来说是占了很大比重，因此在条件允许的情况下还是大胆尝新，不要被一些过去的所谓的规范所约束着。

  试问现在还有多少人愿意去维护IE6~IE9的兼容性，如果一个产品的用户体验受限于远古浏览器的压制(可能政务Web应用和金融Web应用除外吧)，相信这个产品也不会走得很远。

  “怎么使用CSS变量实现心动效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

  
  网站栏目：怎么使用CSS变量实现心动效果
  URL链接：http://6mz.cn/article/pjcdci.html