1、CSS3过渡在CSS3中可以利用transition属性使元素的某一个属性在指定的时间内从“一个属性值”平滑过渡到“另外一个属性值”从而实现动画效果。1transition属性1transition-duration属性transition-duration属性表示过渡的持续时间单位可以设置成s秒或ms毫秒。2transition-property属性transition-property属性表示对元素的哪一个属性进行过渡操作。在默认情况下所有的值会同时变化。3transition-delay属性transition-delay属性表示执行过渡效果的延迟时间。单位同样是s秒或ms毫秒。当在复合样式transition中设置两个时间时前面的时间表示过渡时间后面的时间表示延迟时间。4transition-timing-function属性transition-timing-function属性表示过渡的形式主要有linear、ease默认值、ease-in、ease-out、ease-in-out四个值。linear匀速ease逐渐慢下来ease-in加速ease-out减速ease-in-out先加速后减速transition-timing-function的可选值可选值说明ease逐渐慢下来函数等同于贝塞尔曲线0.250.10.251.0linear线性过渡函数等同于贝塞尔曲线0.00.01.01.0ease-in由慢到快函数等同于贝塞尔曲线0.4201.01.0ease-out由快到慢函数等同于贝塞尔曲线000.581.0ease-in-out由慢到快再到慢函数等同于贝塞尔曲线0.4200.581.0cubic-bezier特定的cubic-bezier曲线。x1y1x2y24个值特定于曲线上的点P1和点P2。所有的值需在[01]区域内否则无效。2cubic-bezier值除了简单的过渡形式之外transition属性还提供了cubic-bezier值贝塞尔曲线贝塞尔曲线是应用于二维图形应用程序的数学曲线可以通过谷歌开发工具中调节到自己想要设置的样式。2、CSS3变形CSS3为元素提供了变形的属性利用这些属性可以制作多种效果的网页提高用户体验。1transform属性在CSS3中可以使用transform属性来实现文字或图像的各种变形效果如位移、缩放、旋转、斜切等。1translate()方法translate()方法表示元素位移的操作方法。在CSS3中可以使用translate()方法将元素沿着水平方向X轴和垂直方向Y轴移动。translate方法与relative相对定位相似元素位置的改变不会影响到其他元素。对于位移translate()方法可分为三种情况。translate()方法的三种情况translate()方法描述translateX(x)元素仅在水平方向移动X轴移动0点坐标相对于自身位置translateY(y)元素仅在垂直方向移动Y轴移动0点坐标相对于自身位置translate(x,y)元素在水平方向和垂直方向同时移动X轴和Y轴同时移动下面列出了translate()方法三种情况的演示。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style .main { width: 150px; height: 150px; border: 1px black solid; } #box1 { width: 80px; height: 80px; background: red; transform: translateX(40px); } #box2 { width: 80px; height: 80px; background: red; transform: translateY(40px); } #box3 { width: 80px; height: 80px; background: red; transform: translate(40px); } /style /head body div classmain div idbox1/div /div div classmain div idbox2/div /div div classmain div idbox3/div /div script /script /body /html2scale()方法scale()方法表示元素缩放的操作方法。缩放指的是缩小和放大。在CSS3中可以使用scale()方法来将元素根据中心原点进行缩放。与translate()方法一样缩放scale()方法也有三种情况。值为相对比例值如果大于1就代表放大如果小于1就代表缩小。scale()方法分类scale()方法描述scaleX(w)元素仅水平方向缩放X轴缩放w值为宽度缩放的比例值默认大小比例值为1scaleY(h)元素仅垂直方向缩放Y轴缩放h值为高度缩放的比例值默认大小比例值为1scale(w,h)元素水平方向和垂直方向同时缩放X轴和Y轴同时缩放3rotate()方法在CSS3中可以使用rotate()方法来将元素相对中心原点进行旋转。rotate()方法的参数单位是deg角度。当设置正值时表示顺时针旋转当设置负值时表示逆时针旋转。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style .main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 80px; height: 80px; background: red; transform: rotate(45deg); } /style /head body div classmain div idbox/div /div script /script /body /html4skew()方法在CSS3中可以使用skew()方法将元素斜切显示。skew()方法与translate(0方法、scale()方法一样也分为三种情况。skew()方法的参数单位与rotate()方法一样需要设置倾斜的角度。当设置正值时表示顺时针斜切当设置负值时表示逆时针斜切。skew()方法分类skew()方法描述skewX(x)使元素在水平方向倾斜X轴倾斜skewY(y)使元素在垂直方向倾斜Y轴倾斜skew(x,y)使元素在水平方向和垂直方向同时倾斜X轴和Y轴同时倾斜下面列出了skew()方法三种情况的演示。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style .main { width: 150px; height: 150px; border: 1px black solid; } #box1 { width: 80px; height: 80px; background: red; transform: skewX(30deg); } #box2 { width: 80px; height: 80px; background: red; transform: skewY(30deg); } #box3 { width: 80px; height: 80px; background: red; transform: skew(30deg, 30deg); } /style /head body div classmain div idbox1/div /div div classmain div idbox2/div /div div classmain div idbox3/div /div script /script /body /html变形的方法可以组合使用但要注意顺序即由后向前执行。translate()位移方法与其他方法会被前面的方法影响。translate()位移方法与其他方法会被前面的方法影响。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #box1 { width: 80px; height: 80px; background: red; } #box2 { width: 80px; height: 80px; background: red; transform: translateX(100px) scale(0.5, 0.5); } #box3 { width: 80px; height: 80px; background: red; transform: scale(0.5, 0.5) translateX(100px); } /style /head body div idbox1/div div idbox2/div div idbox3/div script /script /body /html2transform-origin属性CSS3中位移、缩放、旋转、倾斜默认都是以元素的中心原点进行变形。在CSS3中可以通过transform-origin属性改变元素变形时中心原点位置。其属性值可以采用长度值和关键字两种取值方式。长度值一般使用百分比作为单位。使用transform-origin属性时水平方向和垂直方向都需要设置其对应的值。transform-origin属性取值与背景位置background-position属性取值相似。transform-origin属性取值及中心原点位置关键字长度值中心原点位置top left0 0左上top center50% 0靠上居中top right100% 0右上left center0 50%靠左居中center center50% 50%正中right center100% 50%靠右居中bottom left0 100%左下bottom center50% 100%靠下居中bottom right100% 100%右下以左上角位置为原点进行斜切设置的演示。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 200px; height: 200px; border: 1px black solid; } #box { width: 100px; height: 100px; background: red; transform: skew(30deg, 30deg); transform-origin: left top; } /style /head body div idmain div idbox/div /div script /script /body /html3、CSS3动画1animation属性在CSS3中用animation属性实现动画效果。animation属性和transition属性功能相同都是通过改变元素的“属性值”来实现动画效果但这两者又有很大的区别transition属性只能通过指定属性的开始值与结束值再在这两个属性值之间进行平滑过渡来实现动画效果因此只能实现简单的动画效果。animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。animation属性是一个复合属性主要包含animation-duration、animation-name、animation-delay、animation-iteration-count和animation-timing-functionanimation-direction六个子属性。1animation-duration属性animation-duration属性表示动画的持续时间单位可以设置成s秒或者ms毫秒。2animation-name属性animation-name属性表示动画的名称可以通过keyframes关键帧样式来找到对应的动画名。动画名称!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; animation: 1s move; } keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 0); } } /style /head body div idmain div idbox/div /div script /script /body /html动画效果!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; animation: 1s move; } keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(100px, 0); } 50% { transform: translate(100px, 100px); } 75% { transform: translate(0, 100px); } 100% { transform: translate(0, 0); } } /style /head body div idmain div idbox/div /div script /script /body /html通过animation-name属性可以找到指定的keyframes关键帧对应的样式。3animation-delay属性animation-delay属性表示执行动画效果的延迟时间单位是s秒或ms毫秒。在复合样式animation中设置两个时间时前面的时间表示动画时间后面的时间表示延迟时间。animation-delay属性与transition-delay属性效果类似。4animation-iteration-count属性animation-iteration-count属性表示动画的执行次数默认整个动画执行一次可以设置一个infinite值表示执行无限次。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; animation: 1s move 3; } keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 0); } } /style /head body div idmain div idbox/div /div script /script /body /html5animation-timing-function属性animation-timing-function属性表示动画的形式与transition-timing-function的过渡形式完全一样默认情况下是ease样式。2animation-fill-mode属性animation-fill-mode属性可控制动画停止的位置。通过animation-fill-mode属性可以让元素运动结束后停止在结束位置。其属性值有forwards和backwards两个常见值。forwards值表示动画结束之后继续应用最后的关键帧位置backwards值表示会在元素应用动画样式时迅速应用动画的初始帧。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; animation: 1s move; animation-fill-mode: forwards; } keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 0); } } /style /head body div idmain div idbox/div /div script /script /body /html3animation-direction属性在CSS3中可以使用animation-direction属性定义动画的播放方向其属性值有normal、reverse、alternate三个常见值。normal值为默认值表示每次循环都向正方向播放而reverse值则正好相反每次循环都向反方向播放。alternate值表示播放次数为奇数时动画向原方向播放播放次数是偶数时动画向反方向播放。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #box1 { width: 50px; height: 50px; background: red; animation: 2s move 3; animation-direction: reverse; } #box2 { width: 50px; height: 50px; background: red; animation: 2s move 3; animation-direction: alternate; } keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 0); } } /style /head body div idbox1/divbr div idbox2/div script /script /body /html4animation-play-state属性在CSS3中可以使用animation-play-state属性来定义动画的播放状态其属性值可以设置为running和paused两个值。running值表示播放动画默认值paused值表示暂停动画。一般情况下都是通过JavaScript方式进行播放、暂停的控制。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #box { width: 100px; height: 100px; background: red; animation: 1s move; animation-play-state: paused; } keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 0); } } /style /head body input typebutton value播放 idbtn div idbox/divbr script var btn document.getElementById(btn); var box document.getElementById(box); var onoff true; btn.onclick function() { if (getComputedStyle(box).animationPlayState paused) { box.style.animationPlayState running; this.value 暂停; } else { box.style.animationPlayState paused; this.value 播放; } } /script /body /html4、CSS3之3D3D即三维空间是指在平面二维系中又加入了一个方向向量构成的空间系。3D指的是坐标轴的三个轴即x轴、y轴、z轴其中x表示左右空间y表示上下空间z表示前后空间这样就形成了视觉立体感。1transform3D属性1rotateX()方法rotateX()方法元素会沿着x轴进行旋转在页面中垂直上下方向进行翻转。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; color: white; margin: 50px; transition: 1s; } #main:hover #box { transform: rotateX(180deg); } /style /head body div idmain div idboxCSS3/div /div script /script /body /html2rotateY()方法rotateY()方法元素会沿着y轴进行旋转在页面中会左右方向进行翻转。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; color: white; margin: 50px; transition: 1s; } #main:hover #box { transform: rotateY(180deg); } /style /head body div idmain div idboxCSS3/div /div script /script /body /html3rotateZ()方法rotateZ()方法元素会沿着z轴进行旋转与rotate()方法展示的旋转效果一样。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; color: white; margin: 50px; transition: 1s; } #main:hover #box { transform: rotateZ(180deg); } /style /head body div idmain div idboxCSS3/div /div script /script /body /html4translateZ()方法translateZ()方法元素会沿着z轴进行位移。当值为正数时元素会垂直于屏幕向前移动元素显示会变大当值为负数时元素会垂直于屏幕向后移动显示出的元素会变小。需要配合perspective属性使用。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 150px; height: 150px; border: 1px black solid; perspective: 100px; } #box { width: 50px; height: 50px; background: red; color: white; margin: 50px; transition: 1s; } #main:hover #box { transform: translateZ(50px); } /style /head body div idmain div idboxCSS3/div /div script /script /body /html5scaleZ()方法scaleZ()方法会沿着z轴进行缩放。只有在3D空间中的元素才具备z轴的缩放处理功能。2perspective如果要让页面具备三维空间首先要设置perspective属性。perspective属性表示景深的设置。景深是指在摄像机镜头或其他成像器前沿能够取得清晰图像的成像所测定的被摄物体前后距离范围。简而言之就是用户观察元素的距离元素。当景深的值越小3D幅度越大即离观察的元素比较近当景深的值越大3D幅度越小即离观察的元素比较远。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 150px; height: 150px; border: 1px black solid; perspective: 50px; } #box { width: 50px; height: 50px; background: red; color: white; margin: 50px; transition: 1s; } #main:hover #box { transform: rotateY(180deg); } /style /head body div idmain div idboxCSS3/div /div script /script /body /html3transform-style属性网页添加景深但是对于多个组合的元素还必须添加transform-style属性为preserve-3d值让组合元素产生空间厚度才可以显示出3D的效果。4perspective-origin属性perspective-origin属性用来显示景深的观察原点可以通过改变这个属性值从不同的视角去观察3D元素。5backface-visibility属性backface-visibility属性用来设置3D元素背面隐藏操作。可以通过设置backface-visibility属性为hidden值。hidden值可以把背面的元素进行隐藏处理。利用backface-visibility属性来完成的一个实际例子。有两个层叠加在一起把鼠标移入前面的层会翻转到后面的层利用背面隐藏特性可以很好地隐藏翻转到后面的层。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleCSS3/title style #main { width: 150px; height: 150px; border: 1px #000000 solid; position: relative; } #box { width: 50px; height: 50px; position: absolute; left: 50px; top: 50px; perspective: 50px; } #box div { width: 50px; height: 50px; position: absolute; backface-visibility: hidden; transition: 1s; } #box div:nth-of-type(1) { background: red; transform: rotateY(0deg); } #box div:nth-of-type(2) { background: blue; transform: rotateY(-180deg); } #main:hover #box div:nth-of-type(1) { background: red; transform: rotateY(180deg); } #main:hover #box div:nth-of-type(2) { background: blue; transform: rotateY(0deg); } /style /head body div idmain div idbox divHTML/div divCSS/div /div /div script /script /body /html
