hover的transition

编辑推荐:诚征广告商金主入驻此广告位置,如有感兴趣的金主,欢迎邮件至:airenliao@gmail.com咨询相关合作事宜!!!(^_^)

相信对于很多初学者,对于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;
}

demo

返回顶部