css34实用实用教案

1、2D变换(binhun)lTransformlrotate() 旋转函数 取值度数(d shu)ldeg 度数(d shu)ltransform-origin 旋转的基点lskew() 倾斜函数 取值度数(d shu) ldeg 度数(d shu)lskewX()lskewY()第1页/共9页第一页，共10页。2D变换(binhun)2lTransformlscale() 缩放函数 取值 正数、负数和小数lscaleX()lscaleY()ltranslate() 位移函数 像素(xin s)值ltranslateX()ltranslateY()l实例：钟表效果第2页/共9页第二页，共10页。

2、3d变换(binhun)1l transform-style（preserve-3d） 建立3D空间l perspective 景深(Z轴)l perspective- origin 景深基点(jdin)l transform 新增函数l rotateX()l rotateY()l rotateZ()l translateZ() /前后移动l scaleZ()/Z轴缩放倍数l 实例：3D盒子第3页/共9页第三页，共10页。animationl 关键帧keyFramesl 类似于flashl 只需指明两个状态，之间的过程由计算(j sun)机自动计算(j sun)l 关键帧的时间单位l 数字：0

3、%、25%、100%等l 字符：from(0%)、to(100%)l 格式l keyframes 动画名称l l动画状态l 第4页/共9页第四页，共10页。animate关键帧l格式(g shi)(2)lkeyframes yema_testllfrom background:red; lto background:green; ll可以只有tolanimation-fill-mode :forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。第5页/共9页第五页，共10页。animate调用(dioyng)动画l 调用的标签(#div1、xxx:hover之类的)l

4、必要(byo)属性l animation-name动画名称（关键帧名称）l animation-duration动画持续时间l 例如：l -webkit-animation-name: xinzhuoyue;l -webkit-animation-duration: 4s;l 练习：做一个进度条加载效果l animation-play-state 播放状态（ running 播放 和paused 暂停 ）第6页/共9页第六页，共10页。animate可选属性(shxng)l可选属性lanimation-timing-function动画运动形式llinear匀速。lease缓冲。lease-i

5、n由慢到快。lease-out由快到慢。lease-in-out由慢到快再到慢。lcubic-bezier(number, number, number, number)：特定(tdng)的贝塞尔曲线类型，4个数值需在0, 1区间内第7页/共9页第七页，共10页。animate可选属性(shxng)(2)l可选属性(2)lanimation-delay动画延迟l只是第一次lanimation-iteration-count重复次数linfinite为无限次lanimation-direction播放前重置l动画是否重置后再开始播放lalternate动画直接从上一次停止的位置开始执行lnormal动画第二次直接跳到0%的状态开始执行l实例：无缝(w fn)滚动第8页/共9页第八页，共10页。感谢您的欣赏(xnshng)！第9页/共9页第九页，共10页。NoImage内容(nirng)总结2D变换。transform-style（preserve-3d） 建立3D空间。translateZ() /前后移动。scaleZ()/Z轴缩放倍数。animation-fill-mode :forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。调用