CSS3动画和HTML5新特性有哪些？
CSS3动画和HTML5新特性有哪些？
一、css3动画
☺css3动画相对于通过JavaScript动态改变元素样式性能更好，更加容易。CSS3中有三个关于动画的属性：transform、transition和animation。
1、transform
transform主要用来改变元素形状：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形）。
例：
1 2 3 | .transform-class { transform ： rotate(30deg) scale(2,3); } |
1.1、transform-origin基点
所有变形都基于基点，基点默认为元素的中心点。用法：transform-origin:(x,y)，X、Y可以是百分比、px、rem，也可以是left、right、center（X）和top、center、bottom（Y）。
例：
1 2 3 | .transform-class { transform-origin: (left, bottom); } |
1.2、rotate旋转
通过指定的角度对元素进行旋转变形，若正数则为顺时针旋转，若负数则为逆时针旋转。
例：
1 2 3 | .transform-rotate { transform: rotate(30deg); } |
1.3、scale缩放
scale有三种用法：scale(x,y)、scaleX(x)、scale(Y)。缩放比例如果大于1则放大，等于1 为原始大小，小于1则缩小。
例：
1 2 3 4 5 6 7 8 9 10 11 | .transform-scale { transform: scale(2,1.5); } .transform-scaleX { transform: scaleX(2); } .transform-scaleY { transform: scaleY(1.5); } |
1.4、translate移动
translate有三种情况：translate(x,y)、translateX(x)、translateY(y)。
例：
1 2 3 4 5 6 7 8 9 10 11 | .transform-translate { transform: translate(400px, 20px); } .transform-translateX { transform: translateX(300px); } .transform-translateY { transform: translateY(20px); } |
1.5、skew扭曲
skew有三种写法：skew(xdeg,ydeg)、skewX(xdeg)、skewY(ydeg)，单位deg为角度。
例：
1 2 3 4 5 6 7 8 9 10 11 | .transform-skew { transform: skew(30deg, 10deg); } .transform-skewX { transform: skewX(30deg); } .transform-skewY { transform: skewY(10deg); } |
1.6、matrix
2、transition
transition是用来设置元素是如何从一种状态平滑到另外一种状态：
- transition-property（变换的属性）
- transition-duration（变换延续的时间）
- transition-timing-function（变换的速率）
- transition-delay（变换的延迟）
3、animation
animation比较类似于flash中的逐帧动画，就像电影的播放一样，表现非常细腻并且有非常大的灵活性。而transition只指定了开始和结束状态。逐帧动画由关键帧组成，很多个关键帧的连续播放就组成了动画，在CSS3中是由属性keyframes来完成逐帧动画的。
@keyframes
- animationName：动画名称（自己命名）
- percentage：百分比值 [pəˈsentɪdʒ]
- properties：样式属性名称（color、left等）
例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | @keyframes animationName { from { properties: value; } percentage { properties: value; } to { properties: value; } } //or @keyframes animationName { 0% { properties: value; } percentage { properties: value; } 100% { properties: value; } } |
二、H5新特性
- 用于绘画 canvas 元素。
- 用于媒介回放的 video 和 audio 元素。
- 本地离线存储至localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。
- （新标签）语意化更好的内容元素
表单控件：calendar、date、time、email、url、search。
（选择器）
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
程序员编程交流QQ群：805358732
如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。
- 发表于 2021-08-21 11:28
- 阅读 ( 637 )
- 分类：WEB前端开发
