武林網(www.49028c.com)文章簡介：相信對于很多初學者，對于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; }新聞熱點
疑難解答
