用css3改变背景颜色实现淡入淡出效果

原创于 2015-05-21 21:46:30 发布 · 6.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html css3

html css 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用CSS实现的简单过渡效果案例。该案例中定义了一个宽度为620像素、高度为46像素的div，并设置了背景颜色、居中显示及圆角等样式。通过:hover伪类，当鼠标悬停在div上时，背景颜色会发生变化。此外，还使用了-moz-transition属性来定义背景颜色变化的过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		div{
			width: 620px;
			height: 46px;
			background-color: #444444;
			margin: 0 auto;
			border-radius: 5px;
			-moz-transition:background-color 1s;
			-moz-transition-timing-function:ease-in-out;
		}
		div:hover{
			background-color:#F66169;
		}

以下是html: