1、过渡
1.1 过渡的基本使用
在需要过渡属性的元素内开启过渡属性，同时设置过渡时间以保证过渡效果的出现；
只有值为数字或者属性能转换为数字的属性才支持过渡。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>过渡的基本使用</title><style>css">div {margin: 0 auto;margin-top: 100px;width: 200px;height: 200px;background-color: aquamarine;opacity: 0.5;/* 所有能开启过渡的属性全部开启 */transition-property: all;/* 设置过渡时间 */transition-duration: 1s;}div:hover {width: 400px;height: 400px;background-color: aqua;transform: rotate(45deg);opacity: 1;box-shadow: 0px 0px 20px black;}</style>
</head><body><div></div>
</body></html>
1.2 过渡高级使用
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>过渡的基本使用</title><style>css">.outer {width: 1300px;height: 900px;border: 1px solid black;}.outer:hover .inner {width: 1300px;}.inner {width: 200px;height: 100px;/* 所有能开启过渡的属性全部开启 */transition-property: all;/* 设置过渡时间 */transition-duration: 2.5s;/* 设置过渡等待时间 *//* transition-delay: 2s; */}.box1 {background-color: antiquewhite;transition-timing-function: ease;}.box2 {background-color: green;transition-timing-function: linear;}.box3 {background-color: pink;transition-timing-function: ease-in;}.box4 {background-color: purple;transition-timing-function: ease-out;}.box5 {background-color: burlywood;transition-timing-function: ease-in-out;}.box6 {background-color: chocolate;transition-timing-function: step-start;}.box7 {background-color: red;transition-timing-function: step-end;}.box8 {background-color: yellow;transition-timing-function: steps(20);/* 直接开始 *//* transition-timing-function: steps(20, start); *//* 等一会再开始 *//* transition-timing-function: steps(20, end); */}.box9 {background-color: greenyellow;/* 贝塞尔曲线 */transition-timing-function: cubic-bezier(.65, 1.48, 1, 1.21);}</style>
</head><body><div class="outer"><div class="inner box1">ease(慢快慢，默认)</div><div class="inner box2">linear(匀速)</div><div class="inner box3">ease-in(慢快)</div><div class="inner box4">ease-out(快慢)</div><div class="inner box5">ease-in-out(慢快慢)</div><div class="inner box6">step-start(不考虑过渡时间，直接到终点)</div><div class="inner box7">step-end(过渡时间结束直接到终点)</div><div class="inner box8">steps(分步到达终点)</div><div class="inner box9">贝塞尔曲线</div></div>
</body></html>
1.3 过渡复合属性
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>复合属性</title><style>css">.outer {height: 100px;width: 1000px;border: 1px solid black;}.outer:hover .inner {width: 1000px;/* transition-duration、transition-property、transition-delay、transition-timing-function *//* 过渡时间、过渡元素、过渡延迟时间、过渡类型 */transition: 3s all 0.2s linear;}.inner {height: 100px;width: 100px;background-color: aqua;}</style>
</head><body><div class="outer"><div class="inner"></div></div>
</body></html>
1.4 过渡实现案例
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>案例</title><style>css">.outer {position: relative;cursor: pointer;overflow: hidden;height: 400px;width: 700px;margin: 0 auto;margin-top: 40px;}.outer:hover .mask {opacity: 0.5;}.outer:hover img {transform: scale(1.6) rotate(30deg);}img {height: 400px;transition: 0.5s linear;}.mask {height: 400px;width: 700px;background-color: black;opacity: 0;position: absolute;top: 0;left: 0;color: white;line-height: 400px;text-align: center;font-size: 50px;transition: 1s linear;}</style>
</head><body><div class="outer"><img src="../images/bg.jpg" alt=""><div class="mask">风景</div></div>
</body></html>
![高级java每日一道面试题-2024年11月12日-框架篇[SpringBoot篇]-SpringBoot中的监视器是什么?](/images/no-images.jpg)
