CSS實現DIV從隱藏到展示的過渡效果，cssdiv

CSS實現DIV從隱藏到展示的過渡效果，cssdiv

CSS中有很多功能強大的方法，其中過渡屬性transition就很牛叉。你不用寫一行JavaScript代碼，隨便寫點css就可以實現一個動畫效果。下面結合我在W3C網站上看到的執行個體，舉個栗子說明下(⊙o⊙)…

滑鼠碰我(*^__^*)

上面是一個過渡動畫的demo，效果是不是很帥啊！

 1 <style> 2 .animated_div{ 3     font-size: 12px; 4     width:50px; 5     height:40px; 6     background:#92B901; 7     color:#ffffff; 8     position:relative; 9     font-weight:bold;10     padding:8px 8px 0px 8px;11     margin:5px;12     -webkit-transition:-webkit-transform 1s,background 1s,width 1s,height 1s,font-size 1s;13     -o-transition-property:width,height,-o-transform,background,font-size;14     -o-transition-duration:1s,1s,1s,1s,1s;15     -moz-transition-property:width,height,-o-transform,background,font-size;16     -moz-transition-duration:1s,1s,1s,1s,1s;17     transition-property:width,height,transform,background,font-size;18     transition-duration:1s,1s,1s,1s,1s;19 }20 .animated_div:hover{21     -moz-transform: rotate(720deg);22     -webkit-transform: rotate(720deg);23     -o-transform: rotate(720deg);24     transform: rotate(720deg);25     padding:12px 8px 0 15px;26     background:#1ec7e6;27     width:75px;28     height:60px;29     font-size:16px;30 }31 </style>32 <div class="animated_div">滑鼠碰我(*^__^*)</div>

 額，跑題了(⊙o⊙)…

在開發的過程中，我們會發現transition過渡屬性對於頁面元素的顯隱並沒有提供過渡方法！這就導致元素從display：none到display：block的過程中，瞬發沒有過渡效果。這裡我們可以換個思路，用透明度解決這個問題，通過透明度opacity屬性從0到1的變化類比元素的顯隱，並且過渡屬性transition是提供對透明度opacity屬性的過渡的。在使用透明度的時候要注意相容IE瀏覽器。下面，舉個栗子(⊙o⊙)…

滑鼠碰我的話，我就消失(*^__^*)

 1 <style> 2 .animated_opacity{ 3         font-size: 12px; 4     width:190px; 5     height:25px; 6     background:#92B901; 7     color:#ffffff; 8     position:relative; 9     font-weight:bold;10     padding:8px 8px 0px 8px;11     margin:5px;12         opacity: 1;13         filter:Alpha(opacity=100);14     transition: opacity 2s;15 }16 .animated_opacity:hover{17     opacity: 0;18         filter:Alpha(opacity=0)19 }20 </style>21 <div class="animated_opacity">滑鼠碰我的話，我就消失(*^__^*)</div>