transition css

作者：花折亦无情发布日期:2025-10-29 浏览:11

/* 示例代码：使用 CSS transition 实现简单的过渡效果 */

/* 定义一个按钮样式 */
.button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}

/* 当鼠标悬停在按钮上时，改变背景颜色并添加旋转效果 */
.button:hover {
  background-color: #45a049;
  transform: scale(1.1); /* 放大按钮 */
}

解释说明：

transition 属性用于定义元素的过渡效果。在这个例子中，当鼠标悬停在按钮上时，background-color 和 transform 属性会在 0.3 秒内平滑过渡。
ease 是一种缓动函数，它使得过渡效果更加自然，开始和结束时较慢，中间加速。
transform: scale(1.1) 表示当鼠标悬停时，按钮会放大 10%。

如果你需要更多关于 transition 的详细信息，可以进一步查阅相关文档或教程。

上一篇：css超出显示省略号

下一篇：css文本换行