效果

<template>
  <div class="test">
    <span :style="spanStyle" class="span1">vue</span>
    <br>
    <span :style="{'--opacity': opacity}" class="span2">--css vue</span>
  </div>
</template>
<script>
export default {
  name: 'Nested',
  data() {
    return {
      spanStyle: {
        '--color': 'skyblue'
      },
      opacity: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.opacity >= 1 && (this.opacity = 0)
      this.opacity += 0.2
    }, 300)
    setInterval(() => {
      if (this.spanStyle['--color'] === 'skyblue') {
        this.spanStyle['--color'] = 'red'
      } else {
        this.spanStyle['--color'] = 'skyblue'
      }
    }, 300)
  }
}
</script>
<style scoped>
.test{
  width: 200px;
  height: 100px;
  margin: 50px auto;
  font-size: 28px;
}
.span1 {
  color: var(--color);
}

.span2 {
  text-align: center;
  position: relative;
  opacity: var(--opacity);
}

.span2::after {
  content: '';
  display: block;
  position: absolute;
  left: 100%;

  border-radius: 50%;
}
// width:var(--width,100px) 第二个参数是默认值 这里没有默认值，可按需添加
</style>