过度属性transition

最新推荐文章于 2024-04-13 21:16:23 发布

十友九

最新推荐文章于 2024-04-13 21:16:23 发布

阅读量1.2k

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_43778556/article/details/106128594

版权

HTML 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

在这里插入图片描述 transition:过度属性(all) 过度完成时间缓冲描述延迟时间;

第一个参数(transition-property):过度属性,可以直接写all
第二个参数(transition-duration):过度时间,单位是s
第三个参数(transition-timing-function):缓冲描述,linear匀速,ease非匀速,cubic-bezier贝塞尔曲线
第四个参数(transition-delay):延迟时间,单位是s

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        /*transition:过度属性(all) 过度完成时间 缓冲描述 延迟时间;*/
        /*
        第一个参数(transition-property):过度属性,可以直接写all
        第二个参数(transition-duration):过度时间,单位是s
        第三个参数(transition-timing-function):缓冲描述,linear匀速,ease非匀速,cubic-bezier贝塞尔曲线
        第四个参数(transition-delay):延迟时间,单位是s
        */
        .box{
            width: 300px;
            height: 300px;
            padding: 30px;
            border: 1px solid #000000;
            background-color: lightblue;
            transition: width 1s linear 0s;
        }
        /*干嘣效果*/
        .box:hover{
            width: 700px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>