CSS实现DIV从隐藏到展示的过渡效果

2018-06-24 01:44:17来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:用CSS3来代替JS实现交互

下一篇:font_awesome的icon库的使用