我们在页面上总能看的很多的很有趣的动态效果,而这些动态效果 仅用我们的html css代码便可实现,以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE678之类的浏览器了,下面我大致上为大家介绍一些html 和 css的基础标签
动画
使用动画流程
- 1: 执行动画 @keyform
- 2: 执行动画 animation
2D
transform 将元素应用 2D 或 3D 转换。
translate()
- 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
rotate() - 元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
实例 - 例如:值 rotate(30deg) 把元素顺时针旋转 30 度。
scale()
- 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
skew()
- 元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
- 实例:值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
matrix() 六个函数和
3D
应用场景;实现酷炫效果;在实际开发中;一般不会用到;如果有需要;用的都是第三方库
translate3d(x,y,z) 定义 3D 转化。
动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
需用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,所以应该始终定义 0% 和 100% 选择器。