微信小程序--传送方块

效果展示

Demo代码

wxml

代码语言：javascript复制

<view class="contain">
 <view class="container">
  <view class="loader">
   <view style="--i:1;--color:#FD79A8"></view>
   <view style="--i:2;--color:#0984E3"></view>
   <view style="--i:3;--color:#00B894"></view>
   <view style="--i:4;--color:#FDCB6E"></view>
  </view>
 </view>
</view>

wxss

代码语言：javascript复制

page{
  margin : 0;
  padding: 0;
  background-color: #ffeaa7;
}

.contain{
  position: absolute;
  bottom: 30%;
}

.container {
  transform: scale(0.8);
}

.loader {
  position: relative;
  width   : 608.5px;
  height  : 100px;
}

.loader view {
  position        : absolute;
  width           : 80px;
  height          : 80px;
  background-color: var(--color);
  left            : calc((var(--i) - 1) * 125px - 70px);
  border-radius   : 20px;
  animation       : animate 1s linear infinite;

  display        : flex;
  justify-content: center;
  align-items    : center;
}

@keyframes animate {
  0% {
      transform: rotate(-45deg);
  }

  100% {
      transform: rotate(45deg);
  }
}

.loader view::after {
  position        : absolute;
  content         : '';
  width           : 80px;
  height          : 80px;
  background-color: var(--color);
  top             : -120px;
  border-radius   : 20px;
  animation       : animate_show 4s steps(1, end) infinite;
  animation-delay : calc((5 - var(--i)) * -1s);
}

@keyframes animate_show {

  0% {
      opacity: 1;
  }

  25% {
      opacity: 0;
  }

  50% {
      opacity: 0;
  }

  75% {
      opacity: 0;
  }

  100% {
      opacity: 0;
  }

}


.loader view::before {
  position        : absolute;
  content         : '';
  width           : 40px;
  height          : 40px;
  border-radius   : 50%;
  background-color: #fff;
}

微信小程序

0 人点赞