CSS 3 过渡效果之jquery 的fadeIn ,fadeOut

.div {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.5s,opacity 0.5s linear;
} .div:hover {
visibility: visible;
opacity: 0.5;
transition-delay: 0s;
}

在jquery里,简单调用$('xx').fadeIn();就可完成对element的效果,但是我要求就是使用css3来完成能吗?当然!

在早之前我们会使用以上的代码来完成fade的效果,可现在不需要这么麻烦了

div {
visibility: hidden;
opacity: 0;
transition: all 0.5s linear;
} div:hover {
visibility: visible;
opacity: 0.5;
}

这样就简单多了,不用了解这么多,就在css里说明要在hover时,给上要的效果,有transition来声明要有过渡就可以了

细节与原理

在现代的游览器里,只需给div一个过渡就可以了,在hover时,div:hover也会拥有过渡效果。

如果你要求在hover时,来停个2秒,在离开时直接完成效果,这也可以

div {
visibility: hidden;
opacity: 0;
transition: all 0.5s linear;
} div:hover {
visibility: visible;
transition:all 0.5s linear 2s;
}

当移动点在element上,会直接使用div hover的css,而离开是会使用原本的css。如果hover没有过渡的css,会使用div的过渡css。

上一篇:zabbix 监控特定进程


下一篇:C语言的本质(10)——指针本质