带有渐变倒影的加载条

 

 

<template>
  <div>
    <div class="bruce flex-ct-x">
      <ul class="reflect-loading">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {}
};
</script>
<style lang="scss" scoped>
$count: 10;
$purple: purple;
$blue: blue;
$color: $purple $blue;

.reflect-loading {
  display: flex;
  height: 300px;
  flex-direction: row;
  justify-content: center;
  -webkit-box-reflect: below 0 linear-gradient(rgba(#fff, 0), rgba(#fff, 0.7));
  li {
    list-style: none;
    width: 60px;
    @for $i from 0 to $count {
      $args: append($color, $i * 100% / ($count - 1));
      &:nth-child(#{$i + 1}) {
        background-color: mix($args...);
        animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
        animation-delay: $i * 50ms;
      }
    }
  }
}
@keyframes rotate {
  0% {
    transform: rotate(-0.5turn) rotateX(-1turn);
  }
  75%,
  100% {
    transform: none;
  }
}
</style>

拓展：

box-reflect

语法：

box-reflect：none | <direction> <offset>? <mask-box-image>?

<direction> = above | below | left | right

<offset> = <length> | <percentage>

<mask-box-image> =  none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none：无倒影

above：指定倒影在对象的上边

below：指定倒影在对象的下边

left：指定倒影在对象的左边

right：指定倒影在对象的右边

<length>：用长度值来定义倒影与对象之间的间隔。可以为负值

<percentage>：用百分比来定义倒影与对象之间的间隔。可以为负值

none：无遮罩图像

<url>：使用绝对或相对地址指定遮罩图像。

<linear-gradient>：使用线性渐变创建遮罩图像。

<radial-gradient>：使用径向(放射性)渐变创建遮罩图像。

<repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。

<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像。

说明：

设置或检索对象倒影。

假设定义了 <mask-box-image>，<offset>必须指定，否则可以省略

对应的脚本特性为boxReflect。

兼容性：

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-11.0	2.0-40.0	4.0-45.0-webkit-	4.0-8.0-webkit-	15.0-29.0-webkit-	4.0-8.3-webkit-	2.1-4.4.4-webkit-#1	18.0-42.0-webkit-

1. 需要注意的是4.0以前的安卓系统需要使用老式的渐变语法，详见<gradient>下的各种渐变支持数据。