CSS实现DIV从隐藏到展示的过渡效果
css中有很多功能强大的方法，其中过渡属性transition就很牛叉。你不用写一行JavaScript代码，随便写点css就可以实现一个动画效果。下面结合我在W3C网站上看到的实例，举个栗子说明下(⊙o⊙)…
上面是一个过渡动画的demo，效果是不是很帅啊！
<style>
.animated_div{
font-size: 12px;
width:50px;
height:40px;
background:#92B901;
color:#ffffff;
position:relative;
font-weight:bold;
padding:8px 8px 0px 8px;
margin:5px;
-webkit-transition:-webkit-transform 1s,background 1s,width 1s,height 1s,font-size 1s;
-o-transition-property:width,height,-o-transform,background,font-size;
-o-transition-duration:1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size;
-moz-transition-duration:1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size;
transition-duration:1s,1s,1s,1s,1s;
}
.animated_div:hover{
-moz-transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
padding:12px 8px 0 15px;
background:#1ec7e6;
width:75px;
height:60px;
font-size:16px;
}
</style>
<div class="animated_div">鼠标碰我(*^__^*)</div>额，跑题了(⊙o⊙)…
在开发的过程中，我们会发现transition过渡属性对于页面元素的显隐并没有提供过渡方法！这就导致元素从display：none到display：block的过程中，瞬发没有过渡效果。这里我们可以换个思路，用透明度解决这个问题，通过透明度opacity属性从0到1的变化模拟元素的显隐，并且过渡属性transition是提供对透明度opacity属性的过渡的。在使用透明度的时候要注意兼容IE浏览器。下面，举个栗子(⊙o⊙)…
<style>
.animated_opacity{
font-size: 12px;
width:190px;
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)
}
</style>
<div class="animated_opacity">鼠标碰我的话，我就消失(*^__^*)</div>本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
