<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box1{ width: 800px; height: 800px; background-color: silver; overflow: hidden; } .box1 div{ width: 100px; height: 100px; margin-bottom: 100px; margin-left: 0; } .box2{ background-color: #bfa; /* transition: all 2s; */ /* 过渡: transition 可以指定一个属性发生变化时候切换方式 可以创建一些非常好的效果，提升用户体验 */ /* transition-property 指定要过渡的属性 多个属性间用,隔开 如果所有属性都要过渡，使用all 大部分属性都支持过渡效果(只要是能计算的值都可以)注意:必须是一个有效数值向另一个有效数值过渡 */ /* transition-property: height,width; */ /* transition-property: all; */ /* transition-duration 指定过渡持续时间 时间单位: s和ms 1s = 1000ms */ /* transition-duration: 100ms, 1s; */ /* transition-duration: 2s; */ /* transition-timing-function 过渡的时序函数 指定过渡的执行方式 可选值 -ease 默认值，慢速开始，先加速，再减速 -linear 匀速运动 -ease-in 加速运动 -ease-out 减速运动 -ease-in-out 先加速，后减速 -cubic-bezier()贝塞尔曲线来指定时序函数 steps() 分步执行过渡效果 -end 在时间结束执行过渡 -start 在时间开始时执行过渡 */ /* transition-timing-function: cubic-bezier(); */ /* transition-timing-function: steps(1,end); */ /* transition-delay 过渡效果的延迟 */ /* transition-delay: 2s; */ /* transition 可以同时设置相关的所有属性，要求如果有延迟则两个时间中第一个是持续时间，第二个是延迟 */ transition:margin-left 2s 1s; } .box3{ background-color: orange; transition-property: all; transition-duration: 2s; } .box1:hover div{ /* 200px; height: 200px; background-color: orange; */ margin-left: 700px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>