页面加载完毕相关信息淡入效果_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;即可 ;其他做法 与上面产生原因对应解决即可
上一篇: php图片等比例缩放
下一篇: PHP缓存技术的使用说明_PHP
推荐阅读
-
如何使用SVG生成超酷的页面预加载素描动画效果_html/css_WEB-ITnose
-
css 实现页面加载中等待效果_html/css_WEB-ITnose
-
css 实现页面加载中等待效果_html/css_WEB-ITnose
-
页面加载完毕相关信息淡入效果_html/css_WEB-ITnose
-
如何使用SVG生成超酷的页面预加载素描动画效果_html/css_WEB-ITnose
-
页面加载完毕相关信息淡入效果_html/css_WEB-ITnose
-
页面加载完毕之后 改变innerHTML加入img标签可以吗?_html/css_WEB-ITnose
-
页面加载完毕之后 改变innerHTML加入img标签可以吗?_html/css_WEB-ITnose