搜索到
1
篇与
的结果
-
过渡 1. 基本使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>基本使用</title> <style> .box1 { width: 200px; height: 200px; background-color: orange; /* 设置哪个属性需要过渡 */ /* transition-property: width,height,background-color; */ /* 让所有能过渡的属性都过渡 */ transition-property: all; /* 设置过渡时间 */ /* 分别设置 */ /* transition-duration: 1s,1s,1s; */ /* 统一设置 */ transition-duration: 1s; } .box1:hover { width: 400px; height: 400px; background-color: green; transform: rotate(45deg); box-shadow: 0px 0px 20px black; opacity: 1; } </style> </head> <body> <div class="box1"></div> </body> </html>2. 高级使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>高级使用</title> <style> .outer { width: 1300px; height: 900px; border: 1px solid black; } .box { width: 200px; height: 100px; /* 让所有能过渡的属性都过渡 */ transition-property: all; /* 设置过渡时间 */ transition-duration: 5s; /* 过渡延迟 */ /* transition-delay: 2s; */ } .box1 { background-color: skyblue; transition-timing-function: ease; } .box2 { background-color: orange; transition-timing-function: linear; } .box3 { background-color: gray; transition-timing-function: ease-in; } .box4 { background-color: tomato; transition-timing-function: ease-out; } .box5 { background-color: green; transition-timing-function: ease-in-out; } .box6 { background-color: purple; transition-timing-function: step-start; } .box7 { background-color: deepskyblue; transition-timing-function: step-end; } .box8 { background-color: chocolate; transition-timing-function: steps(20, start); } .box9 { background-color: rgb(18, 78, 34); transition-timing-function: cubic-bezier(1, .35, .78, 1.24); } .outer:hover .box { width: 1300px; } </style> </head> <body> <div class="outer"> <div class="box box1">ease（慢，快，慢）</div> <div class="box box2">linear（匀速）</div> <div class="box box3">ease-in（先慢再快）</div> <div class="box box4">ease-out（先快再慢）</div> <div class="box box5">ease-in-out（先慢再快再慢）</div> <div class="box box6">step-start（不考虑过渡的时间，直接到终点）</div> <div class="box box7">step-end（考虑过渡的时间，时间到了之后直接到终点）</div> <div class="box box8">steps（分步过渡）</div> <div class="box box9">贝塞尔曲线</div> </div> </body> </html>3. 过渡复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>过渡复合属性</title> <style> .outer { width: 1000px; height: 100px; border: 1px solid black; } .inner { width: 100px; height: 100px; background-color: orange; transition: 2.5s all linear; } .outer:hover .inner { width: 1000px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
