用css給小程序畫個簡單寫輪眼

最終的效果

初衷

之前看到過一個h5的迷幻動畫，正好今天有時間，把這個也簡單畫了一下。

動畫分解

1. 重複創建幾個View，每個View爲之前90%大小，並居中
2. 爲預期轉動的View設置css動畫

實際就上面兩點，很簡單。

看一下實際的代碼：

wxml:

<view class="container">
<view class="square">
<view class="square black">
<view class="square">
<view class="square black">
<view class="square">
<view class="square black">
<view class="square">
<view class="square black">
<view class="square">
<view class="square black">
<view class="square">
<view class="square black">
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>

wxss:

.container {
  width: 300rpx;
  height: 300rpx;
}

.square {
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.black {
  background-color: black;
  animation: rotate 10s infinite ease;
}

@keyframes rotate{
  0%{ transform: rotate(0deg); }
  50%{ transform: rotate(180deg); }
  100%{ transform: rotate(-180deg); }  
}

稍作一下改動，比如說改動一下View大小，變成橢圓，就可以變成下面的效果：