hover的transition的写法

2013-12-24阅读(4381)评论(0)牵着狗狗看MM

苏州实时公交查询

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

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

CSS部分:

.testdemo{
	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演示地址:http://www.w3cways.com/example?pid=1005

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » hover的transition的写法
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏