sass常用

2021-01-16  本文已影响0人  江火渔枫

list

//定义动画
@keyframes run {
  0% {
    transform: translateX(0);
  }
  100% {
    left: -320%;
    transform: translateX(-100%);
  }
}
//定义list
$list: #66dacc, #d9e2ee, #4483de, #1391da, #f3bc41, #5197ca;

//随机取list值
  @function sample() {
    @return nth($list, random(length($list)));
  }

//循环
  @for $i from 1 through 15 {
    .item#{$i} {
      animation: run #{$i * 3 + 182}s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      font-size: (random(20) + 20) + px;
      color: sample();
    }
  }
}
上一篇 下一篇

猜你喜欢

热点阅读