菜鸟教程
教程 css tutorial

过渡 transition

CSS 过渡允许属性值在一段时间内平滑变化，无需使用复杂的动画或 JavaScript。

1. 基本语法

css 
transition: property duration timing-function delay;
  • property：指定要过渡的 CSS 属性，如 all 表示所有属性
  • duration：过渡持续时间，如 0.3s
  • timing-function：过渡的速度曲线，如 ease, linear
  • delay：延迟开始时间，如 0s

2. 示例

css 
button {
  background-color: #1976d2;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #1565c0;
}

当鼠标悬停时，按钮背景颜色平滑过渡。

过渡示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>CSS 过渡 transition 示例</title>
<style>
button {
background-color: #1976d2;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}


button:hover {
  background-color: #1565c0;
  transform: scale(1.05);
}



</style>
</head>


<body>
<button>悬停我试试</button>
</body>


</html>

相关内容