css3动画的实例讲解

以你之姓@ 2023-07-07 08:49 9阅读 0赞

## 今天给大家讲一下如何做个旋转木马的相册，效果图如下： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]  
**首先第一步需要先把HTML写好，再去写样式，具体如下：**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]  
当然这不是唯一的写法，也可以不用列表，全用div。插入图片时要确保图片的路径正确。  
**接下来就是重要部分，添加CSS样式**  
![在这里插入图片描述][20200222200208439.png]  
**添加CSS时要注意，先把style标签写上，否则写的CSS样式不会起作用。**  
前三行代码只是为了去掉默认样式，不过如果用到ul就要写，否则会出现小实心圆，影响效果。  
给ul最外面加个容器div只是为了让我们有个眼睛可以去看3D，否则无法看出3D显示效果。  
正式写代码之前，我们应该找找思路，想想从哪下手。  
首先旋转木马就像一个圆柱绕着其中心旋转，所以我们应该先把圆柱做出来在进行旋转就可以了。继续拆解过程，就要考虑怎么形成一个圆柱呢。在这里，可以想一下，如果把一个东西向四周扩散是不是就形成了圆柱呢。所以第二步就是先把所有的图片弄成一张。  
**接下来就要考虑如何合多个为一个呢？**  
![在这里插入图片描述][2020022220032447.png]  
其实很简单，就是定位，把多个图片，都定位在一起就相当于重叠了。我们给ul加上宽高(就是图片的大小)相对定位，再给li加上绝对定位，那么li中的图片都脱离了文档流，相对于ul重合在了一起。在这里提醒一下，transform-style：preserve-3d；样式必须加，否则出现不了厚度，也看不出3d效果。  
然后就要考虑怎么移动的问题了，一个圆可以放下很多正多边形，所以只要斜着走正多边形的边长就会形成一个圆。因为transform变形样式是先执行后面写的，并且位移会受影响。要想斜着走就是先执行位移这样位移会受到前面旋转样式的影响按一定角度。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 2]  
以上代码中transform是关键，后面的添加图片倒影的，可以删除。  
**最后一步就是添加动画**  
@加上关键帧名字再加上动画名字看似就成了一个函数，在这个函数里，动画从0%到100%；因为一开始就是没旋转，就是0度，所以0%可以省略。剩下的就是在ul中调用，因为是ul包括了所有图片进行一起旋转，调用动画的复合样式，添加动画名，一次动画时间、匀速、是否循环就构成了完美的动画旋转木马效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200222204158366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200222193921160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[20200222200208439.png]: https://img-blog.csdnimg.cn/20200222200208439.png
[2020022220032447.png]: https://img-blog.csdnimg.cn/2020022220032447.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200222201655450.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70