|
过渡动画：
transition 简写属性，用于在一个属性中设置四个过渡属性。 none 没有属性会获得过渡效果。 all 所有属性都将获得过渡效果。 属性名称 transition-duration 定义过渡效果花费的时间。默认是 0。单位是秒或毫秒 linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1
之间的数值。 transition-delay 规定过渡效果何时开始。默认是 0。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>6-52课堂演示</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="div1">过渡动画1</div> <div id="div2">过渡动画2</div> <div id="div3">过渡动画3</div> <div id="div4">过渡动画4</div> <div id="div5">过渡动画5</div> </body> </html> @charset="UTF-8"; div{ width: 300px; height: 150px; margin: 30px; font-size: 28px; } #div1{ background: red; transition-property: width; transition-duration: 1s; transition-timing-function: ease; } #div1:hover{ background: green; width: 150px; } #div2{ background: orange; transition-property: width; transition-duration: 1s; transition-timing-function: cubic-bezier(0.2,0.4,0.5,1); transition-delay:2s; } #div2:hover{ background: green; width: 150px; } #div3{ background: blue; transition: all 2s ease-in-out 0s; } #div3:hover{ background: green; width: 150px; } #div4{ background: rgba(120,60,30,0.8); transition: width 1s ease , background 2s linear; } #div4:hover{ background: green; width: 150px; } #div5{ background: rgba(20,60,130,0.8); transition: all 1s ease 0.5s; } #div5:hover{ background: green; width: 150px; transform: rotate(360deg); } |
|
|
