hover的transition

本文主要是介绍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;
}

这篇关于hover的transition的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---