页面加载完毕相关信息淡入效果_html/css_WEB-ITnose
前言：
年关将至，公司一部分同事已经回老家了，虽然过年不回去，但想到明天上完班就放假了内心多少有点激动。工作上的事情不要紧的已经没心情再看了，加之今天领导不在 哈哈哈... 搞点自己的爱好！
看bootstrap的优站精选时看到了一个页面加载完毕时的一个淡入效果（http://www.mikeinghamdesign.com/），于是...
效果图：
实现思路：
此处实现主要用外边距margin-top属性和透明度opacity属性；
1.淡入区块初始设置一定上外边距，透明度完全透明；
2.页面加载完毕利用jquery的animate动画函数动态减去一定上外边距，透明给完全不透明，此处我设置执行时间为1s（先执行第一个淡入的区块，成功显示后，回调执行第二个要显示的区块）；
源码：
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Mike_Index</title> <style> *{margin:0;padding:0;font-family:'Microsoft YaHei';} a{text-decoration:none;} li{list-style:none;} body {background-color: #1B244B;} .content {height:700px;} .content {overflow:hidden; background-image:url('../Images/mike/heroshot.jpg');background-repeat:no-repeat;background-size:cover;background-position:center center;} .content .opreation{width:500px;margin:260px auto 0 auto;color:#fff;letter-spacing:5px;text-align:center;} .content .opreation .title{letter-spacing:8px;font-size:42px;font-weight:normal;} .content .opreation .text-wrap,.content .opreation button{ margin-top:35px;opacity:0;} .content .opreation .text{letter-spacing:3px;margin-top:5px;} .content .opreation .line{display:block;margin:10px auto 70px auto; width:60px;height:2px;background-color:#0093cb;} .content .opreation button{height:65px;width:210px;line-height:65px;color:#fff;font-size:15px;letter-spacing:3px; background-color:transparent;border:1px solid #fff;border-radius:5px;cursor:pointer; transition:border-color 0.4s linear;} .content .opreation button:hover{border-color:#0093cb;} </style> <script src="~/Scripts/jquery-1.8.2.js"></script> <script> $(function () { txtBtnFadeIn(); }); var txtBtnFadeIn = function () { var $txt = $('.content .opreation .text-wrap'); var $btn = $('.content .opreation button'); setTimeout(function () { var animate_para = { 'margin-top': 0, 'opacity': 1 }; $txt.animate(animate_para, 1000, 'linear', function () { $btn.animate(animate_para, 1000); }); }, 500); } </script></head><body> <div class="content"> <div class="opreation"> <h1 id="MIKE-INGHAM">MIKE INGHAM</h1> <div class="text-wrap"> <p class="text">WEB & GRAPHIC DESIGNER</p> <span class="line"></span> </div> <button>GET IN TOUCH</button> </div> </div></body></html>总结：
遇到问题：给子元素div设置margin-top时，发现子元素div没有距父元素div产生上边距，而是父元素div距整个页面产生了上边距；
问题原因：网上找资料且自己在火狐证实，得出结论：当两个嵌套的div如果父div与子div之间没有任何非空元素且父元素div没有上 内 边距且父元素没有上边框两个div会共享上外边距；
问题解决：通常做法 父元素加overflow：hidden；即可 ；其他做法 与上面产生原因对应解决即可
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML中起始标签的示例是什么？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
