小程序-万花筒效果

wxml

<view class="bgContainer">
    <view class="section sect-1"></view>
    <view class="section sect-2"></view>
    <view class="section sect-3"></view>
    <view class="section sect-4"></view>
    <view class="section sect-5"></view>
    <view class="section sect-6"></view>
    <view class="section sect-7"></view>
    <view class="section sect-8"></view>
    <view class="section sect-9"></view>
    <view class="section sect-10"></view>
    <view class="section sect-11"></view>
    <view class="section sect-12"></view>
</view>

wxss

page{
  background-color: #000;
}
.bgContainer {
  position: fixed;
  width: 140vmax;
  height: 140vmax;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* -webkit-animation: spin 24s linear infinite; */
  animation: spin 240s linear infinite;
}

.section {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 37.51285vmax;
  height: 70vmax;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  transform-origin: 50% 100%;
  background-image: url("https://xxx.png");
  background-size: 150%;
  -webkit-animation: move-background 24s infinite linear;
  animation: move-background 24s infinite alternate linear;
}
.an1{
  top:0;
  left:0;
  animation: move-background 24s alternate infinite linear;
}

.sect-1 {
  -webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(30deg);
  transform: translateX(-50%) rotateY(180deg) rotateZ(30deg);
}

.sect-2 {
  -webkit-transform: translateX(-50%) rotateZ(60deg);
  transform: translateX(-50%) rotateZ(60deg);
}

.sect-3 {
  -webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(90deg);
  transform: translateX(-50%) rotateY(180deg) rotateZ(90deg);
}

.sect-4 {
  -webkit-transform: translateX(-50%) rotateZ(120deg);
  transform: translateX(-50%) rotateZ(120deg);
}

.sect-5 {
  -webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(150deg);
  transform: translateX(-50%) rotateY(180deg) rotateZ(150deg);
}

.sect-6 {
  -webkit-transform: translateX(-50%) rotateZ(180deg);
  transform: translateX(-50%) rotateZ(180deg);
}

.sect-7 {
  -webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(210deg);
  transform: translateX(-50%) rotateY(180deg) rotateZ(210deg);
}

.sect-8 {
  -webkit-transform: translateX(-50%) rotateZ(240deg);
  transform: translateX(-50%) rotateZ(240deg);
}

.sect-9 {
  -webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(270deg);
  transform: translateX(-50%) rotateY(180deg) rotateZ(270deg);
}

.sect-10 {
  -webkit-transform: translateX(-50%) rotateZ(300deg);
  transform: translateX(-50%) rotateZ(300deg);
}

.sect-11 {
  -webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(330deg);
  transform: translateX(-50%) rotateY(180deg) rotateZ(330deg);
}

.sect-12 {
  -webkit-transform: translateX(-50%) rotateZ(360deg);
  transform: translateX(-50%) rotateZ(360deg);
}

@-webkit-keyframes spin {
  0% {
      -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
      transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
  }
  100% {
      -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
      transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
  }
}

@keyframes spin {
  0% {
      -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
      transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
  }
  100% {
      -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
      transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
  }
}

@-webkit-keyframes move-background {
  0% {
      background-position: 100% 0%;
  }
  100% {
      background-position: 0% 100%;
  }
}

@keyframes move-background {
  0% {
      background-position: 100% 0%;
  }
  100% {
      background-position: 0% 100%;
  }
}