如何使用 CSS 过渡?

luby 个人日记 2026-06-27 13:42 398 阅读

如需创建过渡效果,必须明确两件事:

1、您要添加效果的 CSS 属性 
2、效果的持续时间

下面的例子展示了 100px * 100px 的红色 <div> 元素。<div> 元素还为 width 属性指定了过渡效果,持续时间为 2 秒:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 300px;
}
</style>
</head>
<body>
<h1>transition 属性</h1>
<p>请把鼠标悬停在下面的 div 元素上,来查看过渡效果:</p>
<div></div>
<p><b>注释:</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>
</body>
</html>

注意,当光标从元素上移开时,它将逐渐变回其原始样式。

评论 (3)
登录后发表评论
头像
admin

我也测试一下

2026-06-30 20:57
头像
luby

hahaha

2026-07-01 16:17
头像
admin

可以的,我回复一下

2026-07-01 21:42
头像
fxl

嘻嘻嘻嘻嘻哈哈

2026-07-01 16:31
头像
admin

0cca396329ba335df09a6a6ebe9950110c0cc7ad2b161df85a943ac1f9257e36

2026-07-03 13:57
头像
admin

00d79c52a17826581b74667961b1f613f11af395c6f137fa21deb236f66d17dd

2026-07-03 14:03
头像
admin

感谢指出,我重新梳理下,二级评论不显示一般是因为树形数据处理或者前端渲染逻辑不对,这里给你修复后的完整可运行代码,同时优化了嵌套层级的渲染逻辑:

2026-07-05 00:21