-webkit-background-clip:text失效的处理方案

情景：渐变的数字滚动

先说解决方法：使用margin-top。

案例使用的是vue3

1、首先完成渐变

<style>
  .data-box-number {
    color: transparent;
    background: linear-gradient(to right, #00fffb 0%, #33affe 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
</style>

2、完成滚动
首先想到 transform: translateY(100px);但是问题来了，transform会导致-webkit-background-clip:text不生效，使得color: transparent效果显现，字体呈现透明。换用position: absolute定位也不行，最后用margin-top完成。

完整代码：

<template>
  <div class="bg">
    <div class="data-box pr">
      <div class="data-box-text">{{ tipName }}</div>
      <div class="data-box-number df">
        <!-- 单个数据 -->
        <div
          class="bits-turn"
          v-for="(item, index) in tipNumber"
          :key="index"
          :style="'margin-top: calc(-32px *' + item + ')'"
        >
          <div v-for="(item, idx) in 10" :key="idx">{{ idx }}</div>
        </div>
      </div>
      <div>
        <!-- 四角修饰 -->
        <div class="data-box-horn horn-item">
          <!-- 三角形 -->
          <div class="data-box-triangle"></div>
        </div>
        <div class="data-box-horn horn-item"></div>
        <div class="data-box-horn horn-item"></div>
        <div class="data-box-horn horn-item"></div>
      </div>
    </div>
    <div class="change-btn" @click="changeNum">修改</div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  setup() {
    /*--定义data--*/
    const dataMuster = reactive({
      tipName: "测试案例", // 名称
      tipNumber: "123", //数量
    });
    /*--定义methods--*/
    const methods = {
      changeNum: () => {
        dataMuster.tipNumber = "789";
      },
    };
    return Object.assign(toRefs(dataMuster), methods);
  },
});
</script>
<style lang="less" scoped>
.bg {
  background: rgb(7, 34, 96);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.change-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 100px;
  height: 50px;
  background: white;
}
/* 数据小展板 */
.data-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(6, 122, 252, 0.1);
  padding: 20px 32px 16px;
  line-height: 1;
  .data-box-text {
    font-weight: 500;
    font-size: 18px;
    color: transparent;
    background: linear-gradient(to right, #02fdfc 0%, #31b3fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .data-box-number {
    height: 32px;
    margin-top: 10px;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 3px;
    color: transparent;
    background: linear-gradient(to right, #00fffb 0%, #33affe 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
// 十百千
.bits-turn {
  transition: margin 1s ease 0s;
}

.data-box-horn {
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid #61bbf9;
}
.horn-item:nth-child(1) {
  top: 0px;
  left: 0px;
  border-width: 1px 0 0 1px;
}
.horn-item:nth-child(2) {
  top: 0px;
  right: 0px;
  border-width: 1px 1px 0 0;
}
.horn-item:nth-child(3) {
  bottom: 0px;
  left: 0px;
  border-width: 0 0 1px 1px;
}
.horn-item:nth-child(4) {
  bottom: 0px;
  right: 0px;
  border-width: 0 1px 1px 0;
}
.data-box-triangle {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 0;
  height: 0;
  border-top: 5px solid #4cc3ff;
  border-right: 5px solid transparent;
}
</style>