hover的transition

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

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

如需转载,烦请注明出处:https://www.w3cplus.com/blog/592.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部