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

前言：

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

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

效果图：

实现思路：

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

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

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

源码：

总结：

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

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

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