transition过渡

最新推荐文章于 2022-10-01 17:06:04 发布

LH2HA3

最新推荐文章于 2022-10-01 17:06:04 发布

阅读量467

点赞数

分类专栏：督导系统复盘文章标签： html 前端

本文链接：https://blog.csdn.net/LH2HA3/article/details/125537305

版权

督导系统复盘专栏收录该内容

9 篇文章 0 订阅

订阅专栏

页面元素如果要做变化效果，比如鼠标悬浮后元素长度从20变成40。此时如果没有给该元素添加过渡效果，就会发现元素瞬间变长，但是如果添加了过渡效果我们就可以看到变化过程。这样给用户的体验也将会更好。

   transition: 要过渡的属性 花费的时间 运动曲线 何时开始；

要过渡的属性：width heigth 背景颜色等都可以，如果想要所有的属性都有过渡效果可以将这里设置为all

花费的时间：元素从一个状态变为另一个状态的时间 0.3s 单位是秒单位必须写

运动曲线：默认是ease(可以省略)

何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）

口诀：谁做过渡给谁加

<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>CSS3过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费的时间 运动曲线 何时开始 */
            transition: width .5s;
        }
        
        div:hover {
            width: 400px;
        }
    </style>
</head>
 
<body>
    <div></div>
</body>

注：一定要明确变换最终状态，比如上面代码鼠标悬浮后div的最终状态是width是400px，中间过程不用关心。

如果想给多属性添加过渡效果可以用逗号隔开。如下：

transition: width .5s, height .5s;

此时记住要最终状态要设置width和height两个。