美文网首页
sass常用

sass常用

作者: 江火渔枫 | 来源:发表于2021-01-16 14:59 被阅读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();
        }
      }
    }
    

    相关文章

      网友评论

          本文标题:sass常用

          本文链接:https://www.haomeiwen.com/subject/hiunaktx.html