Acerca de los efectos de transición

Función: permite que el estilo del elemento cambie lentamente, a menudo se usa con el desplazamiento para mejorar la experiencia interactiva de la página web.
Nombre de la propiedad: transición.

111
punto importante:

Necesidades de transición: el estado predeterminado y el estado flotante tienen diferentes estilos para tener un efecto de transición.
El atributo de transición se agrega al elemento en sí que necesita ser transicionado (quien cambie agregará el atributo de transición)
La propiedad de transición se establece en diferentes estados, y el efecto es diferente

① Establecido en el estado predeterminado, hay un efecto de transición cuando el mouse se mueve hacia adentro y hacia afuera

② Establezca el estado de desplazamiento, hay un efecto de transición cuando se mueve el mouse hacia adentro y no hay efecto de transición cuando se mueve el mouse hacia afuera.

Caso: el ancho del cuadro cambió de 200 px a 600 px

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        /* 过渡配合hover使用, 谁变化谁加过渡属性 */
        .box {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 宽度200, 悬停的时候宽度600,背景色也变化程红色 花费1秒钟 */
            /* transition: width 1s, background-color 2s; */
            /* 如果变化的属性多, 直接写all,表示所有 */
            transition: all 1s;
        }

        .box:hover {
    
    
            width: 600px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Acerca de los efectos de transición

Supongo que te gusta