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;
rotate属性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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。