一.3D空间转换 1.绘制一个简单的3D立体小盒子
Document
3D小盒子 2.3D导航栏案例
Document
效果如图
这里需要注意提前开启3D效果:transform-style: preserve-3d; 这里的思路是需要把绿色盒子放前面,橙色盒子垂直摆放,旋转90度,盒子翻转之后在前面盒子中间需要往上移动y轴向上移动25px就到了顶部
二.3D的动画效果 1.下面是一个简单的3D小球滚动一圈动画效果
Document
2.剑客动画
Document
它的思路是通过一个盒子装精灵图的一张图片来逐帧显示,叫做逐帧动画steps(数字) 3.通过CSS样式制作简易轮播图
Document
后期制作轮播图主要还是靠学习js制作,这里面需要注意的是轮播图最后一个页面留白问题 解决方法,在最后留白的地方继续添加前面几张图片(根据轮播图每次最多展示宽度或者张数确定) 比如这个最后最多展示三张图片,所有需要cv前三张图片以保证在录播图循环问题上不会出现留白卡顿现象。
4.动画小案例(通过动画相关属性效仿360首页动画)
Document
最后如果你觉得对你有或多或少帮助的话希望能够给up点个赞是对我最大的鼓励,如果有需要改进的地方可以评论区留言,我会一一回复!!!