CSS学习笔记-05 过渡模块的基本用法-CSDN博客

话说 1对情侣两情相悦，你情我愿。时机成熟，夜深人静。、。咳，如果就这么直奔主题，是不是有点猴急，所以，还是要来点前戏@。铛铛，这个时候过渡模块出现了。

划重点：

上代码：

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            /* 告诉浏览器哪个属性需要执行过渡效果 */
            transition-property: width background-color;
            /* 过渡效果持续的时长 */
            transition-duration: 5s,5s;
            
        }
            /* hover 这个伪类选择器出了可以用在a 标签上，还可以用在其他任何标签上 */
        div:hover{
            width: 500px;
            background-color: blue;
        }

        /* 过渡三要素
        1. 必须要有属性变化。
        2. 必须告诉系统哪个属性需要执行过渡效果。
        3. 必须告诉系统过渡效果持续时长。

        注意点：
        当多个属性需要同时执行过渡效果时，用逗号隔开即可。
            transition-property: width background-color;
            transition-duration: 5s,5s;
         */
    </style>
</head>
<body>
    <div></div>
</body>
</html>