css模拟波浪效果

.keyframes(fillUpSvg , {
  0% {
    .transform(translate(0, calc(100px/2)) scaleY(0.6));
  }
  50% {
    .transform(translate(0, 0) scaleY(1));
  }
  100% {
    .transform(translate(0, calc(100px/2)) scaleY(0.6));
  }
});
.keyframes(fillUpSvg2 , {
  0% {
    .transform(translate(0, calc(100px/2)) scaleY(0.7));
  }
  40% {
    .transform(translate(0, 0) scaleY(1));
  }
  100% {
    .transform(translate(0, calc(100px/2)) scaleY(0.7));
  }
});

其中keyframes和transform使用的是less的写法

.keyframes(@name) {
    @-webkit-keyframes @name {
        .-frames(-webkit-);
    }
    @-moz-keyframes @name {
        .-frames(-moz-);
    }
    @-o-keyframes @name {
        .-frames(-o-);
    }
    @-ms-keyframes @name {
        .-frames(-ms-);
    }
    @keyframes @name {
        .-frames();
    }
}
.transform(@string) {
    -webkit-transform: @string;
    -moz-transform: @string;
    -ms-transform: @string;
    -o-transform: @string;
}