css3-宽度位置等过渡属性

最新推荐文章于 2023-11-16 19:42:38 发布

约德尔蒙

最新推荐文章于 2023-11-16 19:42:38 发布

阅读量850

点赞数 1

分类专栏： CSS3

本文链接：https://blog.csdn.net/gyq04551/article/details/53263857

版权

CSS3 专栏收录该内容

15 篇文章 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>

约德尔蒙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-宽度位置等过渡属性

/*------------------------------宽度过渡-----------------------------------*/ /**/ /*.box{*/ /*/!* 给box添加了过渡，时间为2s*!/*/ /*transition: width 2s,background-color 1s;
复制链接

扫一扫