transition:过渡

最新推荐文章于 2023-11-29 15:49:08 发布

&XYZ&

最新推荐文章于 2023-11-29 15:49:08 发布

阅读量199

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/jeff_luyiduan/article/details/104596494

版权

css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>回忆录</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <!-- transition : 过渡 -->
  <div></div>
</body>
<script>
</script>

</html>

* {
    margin: 0;
    padding: 0;
}

div {
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    /*
    transition-property:all;   监听属性的状态改变（width、height）
    transition-duration: .6s;  规定多少秒完成
    transition-timing-function:linear;  规定运动状态的速度,linear：开始到结束速度一致
    transition-delay: 3s;   规定等多少秒才开始进行过渡,默认值为0

    可以将上面的四个属性写在一起：
    transition：transition-property transition-duration transition-timing-function  transition-delay;

    */
    transition: all .6s linear 3s;
}

div:hover {
    width: 200px;
    height: 200px;
}