如何创建 CSS3 过渡效果?
cssweb developmentfront end technology更新于 2025/12/11 1:16:17
要创建 CSS3 过渡效果，请使用 transition 属性。以下是使用 CSS3 创建过渡效果的代码 −
示例
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s;
}
.container:hover div {
width: 100px;
}
</style>
</head>
<body>
<h1>Transition effects example</h1>
<div class="container">
<div></div>
</div>
<h2>Hover over the above div to reduce its width</h2>
</body>
</html>
输出
上述代码将产生以下输出 −
悬停在 div 上方时 −
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
