css3-宽度位置等过渡属性

小灰灰 2022-07-14 00:43 219阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
    /*------------------------------宽度过渡-----------------------------------*/
    
            /*<div class="box"></div>*/
            /*.box{*/
                /*/!* 给box添加了过渡，时间为2s*!/*/
                /*transition: width 2s,background-color 1s;*/
                /*/!* transition: 过渡属性 持续时间*!/*/
                /*/!* 切记：过渡属性加给 标签本身*!/*/
                /*给所有属性添加过渡时间 颜色.宽度等等*/
                /*/!*transition:all 1s;*!/*/
            /*}*/
    
            /*div:hover{*/
                /*width:600px;*/
                /*background-color: red;*/
            /*}*/
    
    
    /*---------------------------------位置过渡-----------------------------------*/
    
            /*<div class="box"></div>*/
            /*.box{*/
                /*position: absolute;*/
                /*left:0;*/
                /*top:0;*/
                /*/!*添加过渡属性*!/*/
                /*transition:left 3s,top 1s;*/
            /*}*/
            /**/
            /*.box:hover{*/
                /*left:100px;*/
                /*top:100px;*/
            /*}*/
    
    /*--------------------------------过渡属性详解-------------------------------------*/
            /*.box{*/
                /*添加过渡*/
                /*/!*transition:all 2s;*!/*/
    
                /*/!* 过渡的属性*!/*/
                /*transition-property: all;*/
    
                /*/!* 过渡的持续时间*!/*/
                /*transition-duration: 2s;*/
    
                /*/!* 运动曲线：linear 线性匀速*/
                /*ease-in: 加速  ease-out: 减速  ease-in-out:先加速后减速*/
                /**!/*/
                /*transition-timing-function:ease-out;*/
                /*/!* 过渡延迟执行*!/*/
                /*transition-delay: 1s*/
    
                /*transition: 过渡属性  持续时间 运动曲线 延迟执行时间  */
                /* 前两个参数是必须的，后两个可以省略*/
                /*transition: all 1s ease-in-out 2s;*/
            /*}*/
    
            /*.box:hover{*/
                /*border-radius: 50%;*/
                /*border:3px solid blue;*/
                /*background-color: pink;*/
            /*}*/
        </style>
    </head>
    <body>
    
    </body>
    </html>