在 CSS3 中动画包括 Transform、Transitions和Animations三大模块,
其中transform 对网页对象进行变形操作,transitions 实现CSS3 属性过渡变化,Animations 实现CSS3样式分步式关键帧动画演示效果。
1.定义2D变形
CSS3 的 2D 变形要通过下方函数来实现:
rotate():旋转对象,取值包括度(如90deg,90°)、
梯形(如100grad,相当于90°),
弧度(如1。57rad,约等于90°)
圈(如0.25turn,等于90°)
scale():缩放对象包含两个数值,分别定义宽和高的缩放比例。参数值大于1为放大,小于1并大于0为缩小。
translate():平移对象,包含两个参数值,分别用来定义对象在x轴和y轴相对于原点的偏移距离
设计2D盒子
网页效果如下:并能进行动画翻转
代码如下:
3.定义3D变形
网页效果如下:
当指针经过时图片翻转变成如下效果:
示例代码:
4设计3D盒子
效果如图:
实例代码:
5.过渡动画
翻转菜单
网页效果如下:
当指针经过是有翻转的动画效果并变色
示例代码
6.激活动画
当鼠标经过时 按钮有光斑移动效果
示例代码:
7.焦点动画
效果如下
当选中框时背景变色
示例代码:
8.设计折叠样式动画
代码如下:
完结!
作者:在校生记录博客