欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

页面加载完毕相关信息淡入效果_html/css_WEB-ITnose

程序员文章站 2022-05-11 23:51:57
...

前言:

年关将至,公司一部分同事已经回老家了,虽然过年不回去,但想到明天上完班就放假了内心多少有点激动。工作上的事情不要紧的已经没心情再看了,加之今天领导不在 哈哈哈... 搞点自己的爱好!

看bootstrap的优站精选时看到了一个页面加载完毕时的一个淡入效果(http://www.mikeinghamdesign.com/),于是...

效果图:

实现思路:

此处实现主要用外边距margin-top属性和透明度opacity属性;

1.淡入区块初始设置一定上外边距,透明度完全透明;

2.页面加载完毕利用jquery的animate动画函数动态减去一定上外边距,透明给完全不透明,此处我设置执行时间为1s(先执行第一个淡入的区块,成功显示后,回调执行第二个要显示的区块);

源码:

Mike_Index

MIKE INGHAM

WEB & GRAPHIC DESIGNER

总结:

遇到问题:给子元素div设置margin-top时,发现子元素div没有距父元素div产生上边距,而是父元素div距整个页面产生了上边距;

问题原因:网上找资料且自己在火狐证实,得出结论:当两个嵌套的div如果父div与子div之间没有任何非空元素且父元素div没有上 内 边距且父元素没有上边框两个div会共享上外边距;

问题解决:通常做法 父元素加overflow:hidden;即可 ;其他做法 与上面产生原因对应解决即可