CSS3執行個體教程:css3的transition

文章簡介：相信對於很多初學者，對於css3的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; }