CSS實現DIV從隱藏到展示的過渡效果
阿新 • • 發佈：2019-09-06
本文轉載於:猿2048網站CSS實現DIV從隱藏到展示的過渡效果
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>