CSS3动画和HTML5新特性详解
一、css3动画
☺css3动画相对于通过JavaScript动态改变元素样式性能更好,更加容易。CSS3中有三个关于动画的属性:transform
、transition
和animation
。
1、transform
transform
主要用来改变元素形状:rotate
(旋转)、scale
(缩放)、skew
(扭曲)、translate
(移动)和matrix
(矩阵变形)。
例:
.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)。
例:
.transform-class { transform-origin: (left, bottom); }
1.2、rotate旋转
通过指定的角度对元素进行旋转变形,若正数则为顺时针旋转,若负数则为逆时针旋转。
例:
.transform-rotate { transform: rotate(30deg); }
1.3、scale缩放
scale
有三种用法:scale(x,y)
、scaleX(x)
、scale(Y)
。缩放比例如果大于1则放大,等于1 为原始大小,小于1则缩小。
例:
.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)
。
例:
.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为角度。
例:
.transform-skew { transform: skew(30deg, 10deg); } .transform-skewX { transform: skewX(30deg); } .transform-skewY { transform: skewY(10deg); }
1.6、matrix
略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等)
例:
@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。
(选择器
)
下一篇:详解浮动元素引起的问题和解决办法