CSS 多色正方形上升效果 #web前端

今天给大家带来的是一个正方形，从下往上的每个不规则的递增的效果。大家可以看一下右转圈，可以用在加载一些项目中，感觉这个反正是挺好看的，所以今天给大家拿出来看看。

选一选，看一下代码，我用的是开发工具是asperxp，用app的。

·首先定义了六块六个方块，虽然它在不停的动，但是可以明显可以看到是六块缩小、放大、缩小、放大一种效果。

·看一下css2，首先定义了一个整体的位置，然后进行了旋转和平移，把它变成了一个竖向。

·下面就是变换的动作，这个动作用在了每一个方块的里面，有十一点六，大家可以看到注视也在下面，就没必要一个一个给大家讲。

·下面是什么？从这到最下面，给每一个方块定义一个尾元素，尾元素是什么？是默认的和它的尾元这两种效果，包括这些动作，大家可以看到和颜色延迟，这种效果其实就是通过延迟来实现的。

·其实大家可以认真看一下，是放大、缩小、放大、做小，只是从上到六个模块的方块的颜色都不同而已，包括上边距都有一个距离。

·再看，主要是什么？就是3d的动画效果，这个就定义在了听一下设置的3d的动画，把在整体的布局上，所以展现效果也是挺好看的，可以给大家慢慢去滑动，就是整体的动画缩小、放大、变换。

·然后是每一个方块的，首先钥匙进行动画效果，然后进行每个方块的为元素，为元素整体的xo的旋转，这根据，这个也是为元素进行检测。

·下面就是给每个方块设置了不同的上面纸和颜色，动画效果最近代码有加就是有点多，但是如果数不够清楚，大家可以自己去写一下。

喜欢的可以收藏、点赞，原代码的可以找我oq进行去获取就行了。今天先讲到这。