Css中transition过渡效果

最新推荐文章于 2024-01-30 11:44:06 发布

yb305小白

最新推荐文章于 2024-01-30 11:44:06 发布

阅读量142

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/yb305/article/details/120524054

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用CSS实现元素的过渡效果和按钮的动画。通过`transition`属性，可以设置元素在不同状态间转换时的样式变化，包括宽度、背景色等。示例中展示了鼠标悬停在div和button上时的平滑过渡效果，同时讲解了`transition-duration`、`transition-timing-function`和`transition-delay`等参数的作用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

div:hover {
  width:300px;
}
.button{
	background:#3a7ff9;
	border-radius:4px;
	border-color:green;
	color:#fff;
	transition: background 0.25s ease-in;
}
.button:hover{
	background:#2cc2e1;
	transition: background 0.25s ease-out;
}
</style>
</head>
<body>
<p>鼠标移动到 button 元素上，查看效果。</p>
<button class="button">动画过渡</button>
<p>鼠标移动到 div 元素上，查看效果。</p>
<div></div>

<p><b>注意:</b> Internet Explorer 9 及其更早版本的浏览器不支持该效果。</p>

</body>
</html>

效果：

语法：

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。