最终的效果

初衷

之前看到过一个h5的迷幻动画，正好今天有时间，把这个也简单画了一下。

动画分解

重复创建几个View，每个View为之前90%大小，并居中
为预期转动的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大小，变成椭圆，就可以变成下面的效果：

用css给小程序画个简单写轮眼相关推荐

android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
基于微信小程序的五子棋小程序（含简单人机）
基于微信小程序的五子棋小程序(含简单人机) 运行截图项目结构目录基本思路实现过程棋盘的生成落子判断胜负悔棋人机对战的实现权值表机器人落子逻辑改进胜负判断方法更多功能结语运行 ...
微信小程序画地块（微信开放文档中腾讯地图）
微信小程序画地块(微信开放文档中腾讯地图) 1.map.js // 引入math计算包 var mathjs = require('../../../source/util/math.js'); // ...
用php制作中奖系统,基于PHP随机抽奖小程序，很简单！
原标题:基于PHP随机抽奖小程序,很简单! 文章来自于:博客网址:https://blog.csdn.net/shaolong1013/article/details/78763057 一个抽奖小程 ...
[小程序]小程序框架的简单页面布局
1.首先下载小程序开发工具 2.小程序中的wxml就相当于html , wxss就相当于css 3.布局和html布局几乎一样 4.宽度使用百分比 5.input框里的文字上下居中是用padding撑 ...
小程序使用css变量,小程序使用css变量实现“换肤”方案
使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单. 基础用法 page { ...
微信小程序page设定css,微信小程序——启动，渲染与Page
四种文件格式: .js js操作至少要写Page({}),用于注册一个页面 .json 一些基础设定至少要一个{} 均需使用双引号, 且不能有注释,不能有多余的逗号 project.config. ...
微信小程序点击改变css,微信小程序按钮button样式修改自定义
在微信小程序中,当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了. 插入button按钮并保存后,便可以以预览界面看到一个原始的按钮. 小程序样式修改默认没有对按钮设置任何样式时 ...
微信小程序开发：简单列表界面的实现
最近,想了解下微信小程序的开发. 看了下官网的组件和API介绍,想通过一个简单的列表展示,来学习下如何开发微信小程序. 先来看下最后的效果(使用的测试数据,后期可改为http请求返回的数据). 底部的 ...

用css给小程序画个简单写轮眼

用css给小程序画个简单写轮眼

最终的效果

初衷

动画分解

用css给小程序画个简单写轮眼相关推荐

最新文章

热门文章