HTML5-CSS3-JavaScript
Posted lewo的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5-CSS3-JavaScript相关的知识，希望对你有一定的参考价值。
CSS3中 变形与动画相关属性
CSS3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段javascript才能实现的功能。CSS3的变形功能可以对html组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出更丰富的外观。
借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了Transition动画。Transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画的持续时间，就可保证HTML组件按指定规则播放动画。
比Transition动画功能更强大的是Animation动画，Animation动画同样可以与位移、旋转、缩放、倾斜4种几何变换结合，但它可以指定多个关键帧，从而允许定义功能更丰富的自定义动画。
1. CSS3提供的变形支持
CSS3提供的变形支持可以对HTML组件进行常见的几何变换，包括旋转、缩放、倾斜、位移4中变换，也可以使用变换矩阵进行变形。
CSS3为变形支持提供了如下两个属性值。
transform : 该属性用于设置变形。该属性支持一个或多个变形函数。CSS3提供了如下变形函数。
translate(tx [,ty]) : 该函数设置HTML组件横向上移动tx距离，纵向上移动ty距离。其中ty参数可以省略，如果省略ty参数，则ty默认为0，表明纵向上没有位移。
translateX(tx) , translateY(ty)
scale(sx, sy) : 该函数设置HTML组件横向上缩放比为sx，纵向上缩放比为sy。sy参数可以省略，如果省略该参数，sy默认等于sx，也就是保持横纵比缩放。
scaleX(sx) = scale(sx,1) , scaleY(sy) = scale(1,sy)
rotate(angle) : 该函数设置HTML组件顺时针转过angle角度。
skew(sx [, sy]) : 该函数设置HTML组件沿着X轴倾斜sx角度，沿着Y轴倾斜sy角度。其中sy参数可以省略，如果省略sy参数，则sy默认为0。
skewX(sx),skewY(sy)
matrix(m11,m12,m21,m22,dx,dy) : 这是一个基于矩阵变换的函数。其中前4个参数将组成变形矩阵；dx、dy将负责对坐标系统进行平移。
transform-origin : 该属性设置变形的中心点。该属性值应该指定为xCenter yCenter，其中xCenter、yCenter支持如下几种属性值。
left : 指定旋转中心点位于HTML组件的左边界。该属性值只能指定给xCenter。
top : 指定旋转中心点位于HTML组件的上边界。该属性值只能指定给yCenter。
right : 指定旋转中心点位于HTML组件的右边界。该属性值只能给xCenter。
bottom : 指定旋转中心点位于HTML组件的下边界。该属性值只能给yCenter。
center : 指定旋转中心点位于HTML组件的中间。如果将xCenter、yCenter都指定为center，则旋转中心点位于HTML元素的中心。
长度值 : 指定旋转中心点距离左边界、右边界的长度。
百分比 : 指定旋转中心点位于横向、纵向上的百分比位置。
例子：
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
2. CSS3提供的Transition动画
CSS3提供了Transition动画支持，Transition动画可以控制HTML组件的某个属性发生改变时会经历一段时间、以平滑渐变的方式发生改变，这就产生了动画效果。
Transition动画通过transition属性来指定。transition属性的值包括如下4个部分。
transition-property : 指定对HTML元素的哪个CSS属性进行平滑渐变处理。该属性可以指定background-color、width、height各种标准的CSS属性。 all指所有属性都执行transition动画处理。
transtion-duration : 指定属性平滑渐变的持续时间。
transtion-timing-function : 指定渐变的速度。该部分支持如下几个值。
ease : 动画开始时较慢，然后速度加快，到达最大速度后再减慢速度。
linear : 线性速度。动画开始时的速度到结束时的速度保持不变。
ease-in : 动画开始时速度较慢，然后速度加快。
ease-out : 动画开始时速度很快，然后速度减慢。
ease-in-out : 动画开始时速度较慢，然后速度加快，到达最大速度后再减慢速度。
cubic-bezier(x1,y1,x2,y2) : 通过贝济埃曲线来控制动画的速度。该属性值完全可以代替ease、linear、ease-in、ease-out、ease-in-out等属性值。
transition-delay : 指定延迟时间，也就是指定经过多长时间的延迟才会开始执行平滑渐变。
例子：
-moz-transition : background-color 4s linear;
-webkit-tansition : background-color 4s linear;
-o-transtion : background-color 4s linear;
3. CSS3提供的Animation动画
CSS3提供了强大的Tween动画支持 : Animation动画，这种动画允许开发者定义多个关键帧，浏览器将会负责计算，插入关键帧之间的虚拟动画帧。
CSS3为Animation动画提供了如下几个属性。
animation-name : 指定动画名称。该属性指定一个已有的关键帧定义。
animation-duration : 指定动画的持续时间。
animation-timing-function : 指定动画的变化速度。
animation-delay : 指定动画延迟多长时间才开始执行。
animation-iteration-count : 指定动画的循环执行次数。无限次循环 infinite
animation : 这是一个复合属性。该属性的格式为 : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count，使用该属性可以同时指定animation-name、animation-duration、animation-timing-function、animation-delay和animation-iteration-count等属性。
需要指出的是，目前暂时只有Chrome、Safari浏览器支持该属性，而且使用该属性时还需要在该属性的前面添加-webkit-前缀。
上面属性中animation-name的属性值应该是一个关键帧定义，这个关键帧定义满足如下格式：
keyframes 关键帧名称 {
from | to | 百分比 {
属性1 : 属性值1;
属性2 : 属性值2;
属性3 : 属性值3;
...
}
...
}
上面语法格式中，from | to | 百分比用于定义关键帧的位置。其中from代表开始处；to代表动画结束帧；百分比则指定关键帧的出现位置。例如，10%代表关键帧出现在动画进行1/10时间处。一个关键帧定义可以包含多个关键帧。
例子 ：
/* 定义一个关键帧 */
@-webkit-keyframes ‘fisheye‘ {
/* 定义动画开始处的关键帧 */
0% {
-webkit-transform : scale(1);
background-color : #eee;
border-radius : 10px;
}
/* 定义动画进行40%时的关键帧 */
40% {
-webkit-transform : scale(1.5);
background-color : #bbb;
border-radius : 10px;
}
/* 定义动画进行100%时的关键帧 */
100% {
-webkit-transform : scale(1);
background-color : #eee;
border-radius : 10px;
}
}
div>a:hover {
/* 指定执行fisheye动画 */
-webkit-animation-name : ‘fisheye‘;
/* 指定动画的执行时间 */
-webkit-animation-duration : 3s;
/* 指定动画的循环无限次 */
-webkit-animation-iteration-count : infinite;
}
以上是关于HTML5-CSS3-JavaScript的主要内容，如果未能解决你的问题，请参考以下文章