云计算应用开发 任务3 前台H5技术扩展阅读 CSS3动画相关属性详解.docxVIP

CSS3动画相关属性详解 本章，我们主要介绍，项目中我们常用，或网页上常见到的一些CSS3效果属性。?以前，我们做一些页面动画效果，是通过JS来完成的，但是JS实现一些动画并不方便，代码量增加，动画效果不稳定等情况困扰着我们。?一般来说，我把2D属性称为平面属性，3D属性，称为立体属性。?为了方便下面的属性描述，我们把应用其属性的元素，简称为项目。 一、2D效果属性 要使用这些属性，我们需要通过?transform?，并且，为了保证兼容性，我们可能还需要添加带有浏览器内核前缀的属性，比如?-webkit-transform。 1、位移属性 translate( x , y ) 简单来说，我们可以认为项目处于一个XY坐标轴的原点，translate( x , y )，当x为正的时候，则项目水平（x轴）向右移动[x]距离；负则向左移动[x]距离。y为正的时候，则项目垂直（y轴）向下移动[y]，反之向上移动。?当然，我们也可以把该属性，拆分为translateX(n)，和translateY(n)，原理相同，不过一般我们还是推荐综合的写法。 代码片段 .box01{ background: rgba(7,204,63,0.9); } .box02{ background: rgba(7,204,63,0.6); transform: translate(100px,100px); } .box03{ background: rgba(7,204,63,0.6); transform: translate(-100px,-100px); } .box04{ background: rgba(7,204,63,0.3); transform: translateX(-300px); } 2、旋转属性 rotate() 这个属性也很简单，比如rotate(?n?deg)，n是数字，deg是单位，我们可以理解为角度，0deg则不旋转。n为正时，顺时针旋转n度，反之，逆时针旋转。?而rotateX和rotateY属性，则可以归纳如3D立体效果的范畴，我们在下面再说。 .box01{ background: rgba(7,204,63,0.6); transform: translate(-200px,0) rotate(-90deg); } .box02{ background: rgba(7,204,63,0.9); } .box03{ background: rgba(7,204,63,0.6); transform: translate(200px,0) rotate(45deg); } 3、缩放属性 scale() scale( x , y )，width为原有的值的 x 倍，height为原有的值的 y 倍。 .box01{ background: rgba(7,204,63,0.9); } .box02{ background: rgba(7,204,63,0.6); transform: scale(1.5,0.5); } .box03{ background: rgba(7,204,63,0.6); transform: scale(0.5,1.5); } 4、倾斜属性 skew() skew(?x?deg,?y?deg ) ,分别表示 X轴和 Y轴倾斜的角度。值可以为负，反方向。?该属性也可以拆分为，skewX( ndeg )，skewY( ndeg )，对 X轴和 Y轴的倾斜角度分别描述。?就我本人而言，这个属性我项目中很少用 二、3D效果属性 3D效果就是立体效果，怎么实现一个3D效果的动画呢？让我们分步来说。?实现3D效果的，相关的属性，很多，兼容性也不一样，我们这里只说一些最常用的属性和使用方法。?我们在这里简单分为三步，第一步是立体环境，第二步是项目的动作或者说操作，第三部则是完成这些动作的规律，比如说时间，速度等。这些综合起来，就是一个3D效果的动画。 1、跟2D动画不同的是，我们需要在外层元素上添加这两个属性（环境）： 1）?transform-style：flat / preserve-3d?默认前一个，但是3D效果需要我们在整个动画的最外层元素，设置后一个属性值。?2）?perspective：none / px?这个属性可以理解为视距，如果把屏幕当作空间，我们做的这个3D效果距离视图的距离，默认为none（那就不要用了），或者是像素值，如1000px。 2、实现一个3D动画，在2D相关属性使用的基础上，我们还经常用的这几个（动作）： 1） 3D