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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:57 AM

前言：

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

看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；即可；其他做法与上面产生原因对应解决即可

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles