《(5.2)--4.2CSSTransitionWeb前端攻城狮.pdf》由会员分享,可在线阅读,更多相关《(5.2)--4.2CSSTransitionWeb前端攻城狮.pdf(8页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、4.2CSS Transitiontransition 过渡指定从个状态到另个状态时如何过渡动画的意义:告诉户发了什么transition 属性transition-propertytransition-durationtransition-timing-functiontransition-delay?div .box height:200px;background:coral;transition?property:height;transition?duration:1s;transition?timing?function:linear;.box:hover height:400px;
2、?stylehttps:/s.codepen.io/webzhao/debug/zyrYwL/yPAJjXnemnKA?div .box height:200px;background:coral;transition:all 1s linear;.box:hover height:400px;background:green;?stylehttps:/s.codepen.io/webzhao/debug/NexoVP/GnMnbNGJD?div .box height:200px;background:coral;transition:height 500ms linear,backgrou
3、nd 2s linear;.box:hover height:400px;background:green;?stylehttps:/s.codepen.io/webzhao/debug/ebJaOY/GnMnbNGJD?div .box height:200px;width:400px;background:coral;transition:height 1s linear,width 1s linear 1s;.box:hover height:400px;width:100px;?stylehttps:/s.codepen.io/webzhao/debug/JwGqdb/jVMpoyWLezjktransition-delaytransition-timing-functionlinearease-outlineareaseease-inease-outease-in-outsteps(4)https:/s.codepen.io/webzhao/debug/vvZrYj/yokZEWaXbOZA