用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大小，变成椭圆，就可以变成下面的效果：