1、转换 2、过渡 3、动画
2016-07-16 09:08
357 查看
1、转换1、什么是转换转换即改变元素的一些状态,大小、位置、形状可以是2d转换,也可以是3d的转换2d : 使元素在 x轴和 y轴上发生变化3d :2d基础上增加了 z轴的变化2、转换属性CSS3转换属性:transform : none / transform-function;none:不转换,默认值transform-function:表示要实现转换的函数旋转:rotate()位移:translate()缩放:scale()transform:rotate(); -- 旋转操作3、转换原点:转换原点:即转换过程中围绕的中心点。默认情况下,原点是在整个元素的中间处更改转换原点:transform-origin:取值 :数值 :以元素左上方的点为(0,0),再去计算其他点百分比:0% , 0% : 左上方的点50% , 50% :元素的中心点关键字:leftrighttopbottomcenterleft top : 表示左上方transform-origin赋值:一个值 :x轴的移动两个值 :x轴和y轴三个值 :x轴,y轴,z轴2、2D转换 - 位移位移:位置移动从当前元素的位置处,移动到指定坐标轴位置处函数:translate(x,y)translate(value);取值:数值、百分比取负值x :正 向右移动负 向左移动y : 正 向下移动负 向上移动单方向位移:translateX(x)translateY(y)3、2D转换 - 缩放缩放:改变元素大小函数:scale(value)scale(x,y)取值:默认值 1缩小:0 - 1 之间的小数放大:大于1scaleX(x) : 横向缩放scaleY(y) : 纵向缩放4、2D转换 - 旋转围绕着指定点,按照指定的角度发生的旋转函数:rotate(deg)取值:deg 为角度 0-360默认为顺时针旋转deg取值为负的话,则将逆时针旋转5、2D转换 - 倾斜函数:skew()取值 :为角度skewX(x)skewY(y)2D转换案例
<!DOCTYPE html> <html> <head> <title> 2d转换-位移 </title> <meta charset="utf-8" /> <style> div{ width:200px; height:200px; position:absolute; left:200px; top:100px; } #d1{ border:1px dotted black; } #d2{ border:1px solid black; background:rgba(0,0,255,0.3); } #d2{ /**位移*/ /*属性:transform*/ /*函数:translate*/ /*transform:translate(50%,-50%);*/ /*transform:translatex(200px);*/ } #d2{ /*缩放*/ /*属性:transform*/ /*函数:scale()*/ /*transform:scale(0.5,2);*/ } #d2{ /*旋转*/ /*属性:transform*/ /*函数:rotate(deg)*/ /*transform:rotate(45deg) translateX(150px);*/ /*transform:rotate(-270deg);*/ /**变换原点*/ /*transform-origin:left top; transform:rotate(45deg);*/ } #d2{ /*transform:skewX(45deg);*/ transform:skewY(45deg); } </style> </head> <body> <div id="d1">原始位置</div> <div id="d2">待转换元素</div> </body> </html>6、3D转换属性:perspective : 设置假定人眼到投影平面的距离只影响3D元素,不影响2D元素设置位置:加在父元素上,设置好后,其子元素就可以完成3D的转换。1、3d位移改变元素在z轴上的位置属性:transform:函数:translateZ(z);translate3d(x,y,z);2、3d旋转属性:transform函数:rotateX(deg);rotateY(deg);rotateZ(deg)rotate3d(x,y,z,deg);x,y,z : 取值为 1,0,-1rotate3d(-1,0,1,45deg);3D旋转案例
<!DOCTYPE html> <html> <head> <title> 3d转换 </title> <meta charset="utf-8" /> <style> #father{ -webkit-perspective:100px; width:200px; height:200px; border:1px solid black; position:relative; } #div1{ position:absolute; width:100px; height:100px; border:1px solid black; background:#ddd; left:50px; top:50px; /*x轴旋转*/ transform:rotateX(45deg); /*y轴旋转*/ /*transform:rotateY(360deg);*/ /*z轴旋转*/ /*transform:rotateZ(90deg);*/ } </style> </head> <body> <div id="father"> <div id="div1">Rotate Div</div> </div> </body> </html>****************************************************1、过渡1、什么是过渡元素从一个【状态】到另外一个【状态】的【平滑变换】【过程】2、过渡属性transition3、过渡4要素(子属性)1、过渡属性元素的哪个【状态】发生变化时要使用过渡的效果当指定的属性发生改变时,就会触发过渡效果语法:transition-property:none | all | propertytransition-property:background;2、过渡时间整个过渡效果在多长时间内完成,以 秒(s)或毫秒(ms)为单位语法:transition-duration: s|ms;transition-duration:1s;注意:过渡时间默认为 0 ,如果为0时,则没有过渡的效果产生。如果想看到过渡效果,则必须设置该属性。3、过渡函数指定时间内(transition-duration)过渡的速度效果。语法:transition-timing-function取值:ease : 默认值,慢速开始,速度变快,慢速结束linear:匀速开始到结束ease-in:慢速开始,加速效果(由慢到快)ease-out:慢速结束,减速效果(由快到慢)ease-in-out:以慢速开始和结束,先加速再减速4、过渡延迟当过渡操作被激发后,等待多长时间后才开始执行效果语法:transition-delay以秒或毫秒作为单位5、统一设置过渡效果属性:transition:用于设置四个过渡子属性transition:transition-property transition-duration transition-timing-function transition-delay;transition: prop dura timing delay;4、触发过渡过渡效果由用户的行为进行触发(点击、鼠标悬停)4、多个过渡效果transition-property:prop1,prop2;transition-duration:t1,t2;transition-timing-function:fun1,fun2;transition-delay:delay1,delay2;过度案例
<!DOCTYPE html> <html> <head> <title> 背景颜色和宽度改变</title> <meta charset="utf-8" /> <style> #d1{ width:200px; height:200px; background:red; /*过渡*/ transition-property:background,width; transition-duration:2s; transition-timing-function:linear; transition-delay:1s; } #d1:hover{ /*过渡*/ /*transition:background 2s linear 0s;*/ background:blue; width:400px; height:400px; } </style> </head> <body> <div id="d1"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title> 鼠标悬停旋转效果 </title> <meta charset="utf-8" /> <style> #parent{ -webkit-perspective:150px; border:1px solid #ddd; } #d1{ border-top:5px solid #000; position:absolute; top:100px; left:300px; width:200px; height:200px; background:rgba(255,0,0,0.3); /*过渡*/ transition:transform 2s linear 0s; } #d1:hover{ /*transform:rotate(720deg);*/ transform:rotateZ(360deg); } </style> </head> <body> <div id="parent"> <div id="d1"></div> </div> </body> </html>
<!DOCTYPE html><html><head><title> 鼠标放在分针上自动旋转 </title><meta charset="utf-8" /><style>#clock{width:400px;height:400px;border:6px solid #369;border-radius:50%;position:relative;}#minute{width:10px;height:100px;background:#f00;position:absolute;top:100px;left:195px;}#second{width:6px;height:140px;background:#369;position:absolute;left:197px;top:60px;transform-origin:3px bottom;/*定义过渡效果*/transition:transform 60s linear 0s;}#second:hover{/*激发过渡操作*/transform:rotate(360deg);}</style></head><body><div id="clock"><div id="minute"></div><div id="second"></div></div></body></html>2、动画1、什么是动画将元素的多个状态放在一起进行运行(多个状态间的转换)过渡:实现简单的动态效果动画:实现复杂的动态效果注意:浏览器兼容性Chrome 和 Safari : -webkit-Firefox : -moz-Opera : -o-实现动画的步骤:1、声明动画@keyframes声明整个动画过程中的不同状态都是什么2、调用动画通过 animation 属性 调用已声明动画2、关键帧语法:@keyframes 规则声明动画
<span style="white-space:pre"> </span><style>@keyframes 动画名称{<span style="white-space:pre"> </span>/*定义关键帧即不同时间点上的动画状态*/<span style="white-space:pre"> </span>from | 0%{<span style="white-space:pre"> </span>/*动画的开始状态(样式)*/<span style="white-space:pre"> </span>}<span style="white-space:pre"> </span>/*...若干关键帧*/<span style="white-space:pre"> </span>20%{<span style="white-space:pre"> </span>/*动画在执行到20%的时候的状态(样式)*/<span style="white-space:pre"> </span>}<span style="white-space:pre"> </span>25%{<span style="white-space:pre"> </span>}<span style="white-space:pre"> </span>26%{<span style="white-space:pre"> </span>}<span style="white-space:pre"> </span>to | 100%{<span style="white-space:pre"> </span>/*动画结束时候的状态(样式)*/<span style="white-space:pre"> </span>}<span style="white-space:pre"> </span>}<span style="white-space:pre"> </span>@-webkit-keyframes changeBack{<span style="white-space:pre"> </span>}<span style="white-space:pre"> </span>@-moz-keyframes changeBack{<span style="white-space:pre"> </span>}<span style="white-space:pre"> </span>@-o-keyframes changeBack{<span style="white-space:pre"> </span>}</style>3、动画属性(调用)1、animation-name : 调用动画的名称,指定 @keyframes 的名字2、animation-duration:动画执行的时常以 s或ms3、animation-timing-function:动画执行时的速度效果取值 ease,linear,ease-in,ease-out,ease-in-out4、animation-delay:延迟时间,以s或ms为单位5、animation-iteration-count动画执行的次数取值 :1、具体数值2、infinite : 无限次播放6、animation-direction : 动画播放方向取值:normalalternate :奇数次播放为正向播放(状态从from - to)偶数次播放为逆向播放(状态从to - from)7、动画综合属性 : animationainimation:name duration timing-function delay iteration-count direction;8、animation-fill-mode指定动画在播放之前或之后的效果none : 默认行为forwards:动画完成后,保持最后一个状态backwards : 动画显示之前,保持在第一个状态both:动画完成后,动画显示前,都被相应的状态所保持着。9、animation-play-state定义动画播放状态配合着 Javascript使用,用于播放过程中暂停动画取值:paused :暂停running :播放动画案例
<!DOCTYPE html><html><head><title> new document </title><meta charset="utf-8" /><style>#d1{width:100px;height:100px;background:red;/*调用 changeDiv 的动画*/-webkit-animation:changeDiv 5s linear 0s;/*-webkit-animation-fill-mode:both;*//*-webkit-animation-direction:reverse;*/}/*声明动画*/@-webkit-keyframes changeDiv{from{background:red;}25%{transform:translateX(50px);background:green;}50%{transform:translateY(50px);background:yellow;}75%{transform:translate(50px,-50px);background:pink;}to{transform:translateX(0px);border-radius:50%;background:blue;}}</style></head><body><div id="d1"></div></body></html>时钟动画
<!DOCTYPE html><html><head><title> new document </title><meta charset="utf-8" /><style>#clock{width:400px;height:400px;border:6px solid #369;border-radius:50%;position:relative;}#minute{transform-origin:5px bottom;width:10px;height:100px;background:#f00;position:absolute;top:100px;left:195px;-webkit-animation:minute 3600s linear 0s infinite;}#second{transform-origin:3px bottom;width:6px;height:140px;background:#369;position:absolute;left:197px;top:60px;-webkit-animation:second 60s linear 0s infinite;}/**定义分针动画*/@-webkit-keyframes minute{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}/*定义秒针动画*/@-webkit-keyframes second{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}</style></head><body><div id="clock"><div id="minute"></div><div id="second"></div></div></body></html>
相关文章推荐
- Oracle OCP笔记(29)RMAN备份 - Config
- linux编译软件
- PHP数组函数: array_walk()与 array_map() 的区别
- eclise项目中文转码
- KMP模板
- 正则表达式表单验证
- hdu 1423(最长公共上升子序列)
- 正则表达式替换字符
- 使用Maven实现Struts2+Hibernate4+Spring3整合SSH框架(二):导入Spring的jar包并添加测试实现
- 正则表达式简单练习
- 解决“Dynamic Web Module 3.0 requires Java 1.6 or newer.”错误
- Android初级教程对大量数据的做分页处理理论知识
- 邮箱验证
- Android初级教程对大量数据的做分页处理理论知识
- iOS屏幕适配
- 正则表达式验证固定号码
- 运算符
- 各种资料链接
- LVS+keepalived实现HA
- codeforces 360 E - The Values You Can Make