[tr][td]相信对于很多初学者,对于css3的transition到底是直接写在选择器上,还是写在选择器的hover上表示疑惑,下面给出两个实例,希望可以为您解惑。
demo1
demo2
.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;
}
[/td][/tr]