一个loading小动画

最新推荐文章于 2024-08-09 15:32:59 发布

原创最新推荐文章于 2024-08-09 15:32:59 发布 · 371 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用LESS编写的动画案例，通过LESS的混合功能实现了五个不同颜色的圆形元素按一定时间间隔进行缩放动画的效果，并提供了编译后的CSS及在线演示链接。

//html
<div>
     <div class="point point1"></div>
     <div class="point point2"></div>
     <div class="point point3"></div>
     <div class="point point4"></div>
     <div class="point point5"></div>
</div>

//less
.translate-big(@times-begin,@times-middle,@times-end,@opacity-begin,@opacity-middle,@opacity-end,@name){
  @keyframes @name{
    0% {
      transform: scale(@times-begin);
      opacity: @opacity-begin
    }
    50%{
      transform: scale(@times-middle);
      opacity: @opacity-middle
    }
    100% {
      transform: scale(@times-end);
      opacity: @opacity-end
    }
  }
  @-webkit-keyframes @name{
    0% {
      transform: scale(@times-begin);
      opacity: @opacity-begin
    }
    50%{
      transform: scale(@times-middle);
      opacity: @opacity-middle
    }
    100% {
      transform: scale(@times-end);
      opacity: @opacity-end
    }
  }
  @-moz-keyframes @name{
    0% {
      transform: scale(@times-begin);
      opacity: @opacity-begin
    }
    50%{
      transform: scale(@times-middle);
      opacity: @opacity-middle
    }
    100% {
      transform: scale(@times-end);
      opacity: @opacity-end
    }
  }
  @-o-keyframes @name{
    0% {
      transform: scale(@times-begin);
      opacity: @opacity-begin
    }
    50%{
      transform: scale(@times-middle);
      opacity: @opacity-middle
    }
    100% {
      transform: scale(@times-end);
      opacity: @opacity-end
    }
  }
}
.translate-big(1,2.1,1,1,0.4,1,point1);
.point{
  display: inline-block;
  width:20px;
  height:20px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
}
.point1{
  .animation(point1,1s,ease,0.17s,infinite);
  background-color: #ef998b;
}
.point2{
  .animation(point1,1s,ease,0.34s,infinite);
  background-color: #ef8adf;
}
.point3{
  .animation(point1,1s,ease,0.51s,infinite);
  background-color: #a0a2ef;
}
.point4{
  .animation(point1,1s,ease,0.68s,infinite);
  background-color: #9becef;
}
.point5{
  .animation(point1,1s,ease,0.85s,infinite);
  background-color: #efdea6;
}

//编译后的css
.point {
  display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.point1 {
  -webkit-animation: point1 1s ease 0.17s infinite;
  -moz-animation: point1 1s ease 0.17s infinite;
  -ms-animation: point1 1s ease 0.17s infinite;
  -o-animation: point1 1s ease 0.17s infinite;
  animation: point1 1s ease 0.17s infinite;
  background-color: #ef998b;
}
.point2 {
  -webkit-animation: point1 1s ease 0.34s infinite;
  -moz-animation: point1 1s ease 0.34s infinite;
  -ms-animation: point1 1s ease 0.34s infinite;
  -o-animation: point1 1s ease 0.34s infinite;
  animation: point1 1s ease 0.34s infinite;
  background-color: #ef8adf;
}
.point3 {
  -webkit-animation: point1 1s ease 0.51s infinite;
  -moz-animation: point1 1s ease 0.51s infinite;
  -ms-animation: point1 1s ease 0.51s infinite;
  -o-animation: point1 1s ease 0.51s infinite;
  animation: point1 1s ease 0.51s infinite;
  background-color: #a0a2ef;
}
.point4 {
  -webkit-animation: point1 1s ease 0.68s infinite;
  -moz-animation: point1 1s ease 0.68s infinite;
  -ms-animation: point1 1s ease 0.68s infinite;
  -o-animation: point1 1s ease 0.68s infinite;
  animation: point1 1s ease 0.68s infinite;
  background-color: #9becef;
}
.point5 {
  -webkit-animation: point1 1s ease 0.85s infinite;
  -moz-animation: point1 1s ease 0.85s infinite;
  -ms-animation: point1 1s ease 0.85s infinite;
  -o-animation: point1 1s ease 0.85s infinite;
  animation: point1 1s ease 0.85s infinite;
  background-color: #efdea6;
}