本文介紹CSS3實現DIV圖層隱藏到顯示的過渡效果，可用于產品列表的產品簡介過渡顯示與隱藏等，希望對你有所幫助。

CSS3的transition過渡屬性對于頁面元素的顯隱并沒有提供過渡方法！所以DIV圖層從display：none到display：block的過程中，瞬發沒有過渡效果。

因此我們可以用透明度解決這個問題，通過透明度opacity屬性從0到1的變化模擬元素的顯隱，并且過渡屬性transition是提供對透明度opacity屬性的過渡的。但是在使用透明度的時候要注意兼容IE瀏覽器。

示例代碼：

.animated_opacity{

font-size: 12px;

width:300px;

height:25px;

background:#92B901;

color:#ffffff;

position:relative;

font-weight:bold;

padding:8px 8px 0px 8px;

margin:5px;

opacity: 1;

filter:Alpha(opacity=100);

transition: opacity 2s;

}

.animated_opacity:hover{

opacity: 0;

filter:Alpha(opacity=0)

}

HTML代碼：

CSS3實現DIV圖層隱藏到顯示的過渡效果！

總結

以上是生活随笔為你收集整理的html隐藏块元素过度动画,CSS3实现DIV图层隐藏到显示的过渡效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。