页面加载完毕相关信息淡入效果_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；即可 ；其他做法 与上面产生原因对应解决即可
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
