html transition

作者：呐爱淡了发布日期:2026-06-08 浏览:129

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义一个简单的过渡效果 */
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 1s ease;
        }

        /* 当鼠标悬停在元素上时，改变其样式 */
        .box:hover {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="box"></div>

</body>
</html>

解释说明：

transition 属性用于定义元素的过渡效果。在这个例子中，.box 类中的 transition: all 1s ease; 表示所有属性的变化将在 1 秒内平滑完成。
当鼠标悬停在 .box 元素上时，hover 伪类会触发样式变化，使盒子的宽度、高度和背景颜色发生变化，并且这些变化会通过 transition 属性定义的过渡效果来实现平滑过渡。

上一篇：html网站源码

下一篇：html加载动画