前端|利用CSS制作动画效果

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

大家是否觉得上面这个图形需要用到的代码会很复杂？其实不然，我们利用简单的css即可达到此种效果。

问题分析

需要制作出此效果，我们首先需要对css动画有一定的了解，在此基础上，我们便能利用css代码写出此效果，那么关于css动画的代码有哪些呢？下面，我就为大家介绍一些关于css动画的代码。

解决方案

首先是关于css2D变换方法：

1. translate(x,y)：向x,y轴2D移动多少像素。
2. translateX（n）：向x轴移动。
3. translateY（n）：向y轴移动。
4. rotate(angle)：2D旋转。
5. scale(x,y)：2D缩放，若y未设置值默认取x的值。
6. scaleX(n)：元素x轴缩放。
7. scaleY(n)：元素Y轴缩放。
8. skew(x-angle,y-angle):2D倾斜，第二个参数为设定，默认值为0。
9. skewX(angle):在x轴上进行倾斜。
10. skewY(angle):在y轴上进行倾斜。

css3D变换：

1. translate3d(x,y,z)：3D移动，所有参数不允许省略。
2. rotate3d(x,y,z,angle)：3D旋转，x，y，z为旋转方向，angle为旋转角度，参数不允许省略。
3. scale3d(x,y,z)：3D缩放，参数不允许省略。
4. 其他沿某一个方向的变换与css2D变换一致。

便可得到以下效果：

结语

本文介绍了如何运用css动画制作一个立体正方体，当我们阅读这篇文章后，我们还可用css动画效果制作更多更好看的图像，如果需要，可进行多次练习、摸索，也可百度找一些模板观察。

更多精彩文章：

算法|从阶乘计算看递归算法

算法|字符串匹配（查找）-KMP算法

JavaScript|脚本岂能随意放置

Web|设置隔行变色的单元格

开发|优秀的Java工程师的“对象”一定不错

谈一谈|2019蓝桥杯回顾与分享

where2go 团队

微信号：算法与编程之美

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！