hover的transition

最新推荐文章于 2024-06-25 01:00:00 发布

原创最新推荐文章于 2024-06-25 01:00:00 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

css&css3 专栏收录该内容

30 篇文章

订阅专栏

本文通过两个实例展示了如何使用CSS3的transition属性为元素添加过渡效果。实例分别演示了颜色渐变及旋转动画的实现方式，并对比了将transition直接应用于元素与应用于:hover状态的区别。

相信对于很多初学者，对于css3的transition到底是直接写在选择器上，还是写在选择器的hover上表示疑惑，下面给出两个实例，希望可以为您解惑。

<div id="demo1" class="demo">demo1</div>
<div id="demo2" class="demo">demo2</div>

.demo{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	border: 10px solid #ccc;
	border-radius: 60px;
	font-size: 20px;
	-webkit-backface-visibility: hidden;
}
#demo1{
	-webkit-transition:border-color 0.3s ease;
	-moz-transition:border-color 0.3s ease;
	-ms-transition:border-color 0.3s ease;
	-o-transition:border-color 0.3s ease;
	transition:border-color 0.3s ease;
}
#demo1:hover{
	border-color: #A3D7FF;
}
#demo2{
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;
}
#demo2:hover{
	background-color:#A3D7FF;
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);
	-webkit-transition:background-color 0.3s ease;
	-moz-transition:background-color 0.3s ease;
	-ms-transition:background-color 0.3s ease;
	-o-transition:background-color 0.3s ease;
	transition:background-color 0.3s ease;
}