machinecat520
/
zj-Exercise


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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;
            margin-left: 0;
        }

        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
        }

        .box2{
            background-color: #bfa;
            /* margin-left: 700px; */
            /* margin-left: auto; */
            /* 当margin-left的值为auto时，则没有过渡效果（因为auto的值不确定） */
            /* transition: all 2s; */
            /* 
                过渡（transition）
                    -通过过渡可以指定一个属性发生变化时的切换方式
                    -通过过渡可以创建一些非常好的效果，提升用户的体验
            */
            /* 
                transition-property: 指定要执行过渡的属性
                    多个属性间使用逗号“,”隔开
                    如果所有属性都需要过渡，则使用all关键字
                    大部分属性都支持过渡（只要值是可以计算的，就支持过渡，比如大小、角度、颜色等）
                    注意：
                        过渡是必须是从一个有效数值向另外一个有效数值进行过渡
            */
            /* transition-property: width,height; */
            /* transition-property: all; */

            /* 
                transition-duration: 指定过渡效果的持续时间
                    时间单位：s 和 ms   1s=1000ms
                    可以分别指定时间，用逗号“,”隔开
            */
            /* transition-duration: 2s; */
            /* transition-duration: 500ms; */
            /* transition-duration: 0.5s; */
            /* transition-duration: 0.5s,1s; */

            /* 
                transition-timing-function: 过渡的时序函数
                    指定过渡执行的方式
                    可选值：
                        ease：默认值，慢速开始，先加速，再减速
                        linear：匀速运动
                        ease-in：加速运动
                        ease-out：减速运动
                        ease-in-out：先加速，后减速
                        cubic-bezier()  （贝塞尔曲线）来指定时序函数
                            https://cubic-bezier.com
                        steps()：分步执行过渡效果
                            可以设置一个第二个值：
                            end     在时间结束时执行过渡（默认值）
                            start   在时间开始时执行过渡
            */
            /* transition-timing-function: ease; */
            /* transition-timing-function: linear; */
            /* transition-timing-function: ease-in; */
            /* transition-timing-function: ease-out; */
            /* transition-timing-function: ease-in-out; */

            /* transition-timing-function: cubic-bezier(0,0,1,1); */
            /* 相当于linear */
            /* transition-timing-function: cubic-bezier(.25,.1,.25,1); */
            /* 相当于ease */
            /* transition-timing-function: cubic-bezier(.24,.95,.82,-.88);  */

            /* transition-timing-function: steps(2,end);  */
            /* end：表示每步时间计时结束后才执行 */
            /* transition-timing-function: steps(2,start);  */
            /* start：表示每步时间开始计时的时候就开始执行 */

            /* 
                transition-delay: 过渡效果的延迟，等待一段时间后再执行过渡
            
            */
            /* transition-delay: 2s; */

            /* 
                transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，
                    则两个时间中第一个是持续时间，第二个是延迟
            */
            transition: 2s margin-left 1s cubic-bezier(.24,.95,.82,-.88);
        }

        .box3{
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }

        .box1:hover div{
            /* width: 200px;
            height: 200px; */
            /* background-color: orange;
            margin-left: 0; */
            margin-left: 700px;
        }

    </style>
</head>
<body>
    
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>