Heim >Web-Frontend >HTML-Tutorial >页面加载完毕相关信息淡入效果_html/css_WEB-ITnose
页面加载完毕相关信息淡入效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:57:491193Durchsuche
前言：
年关将至，公司一部分同事已经回老家了，虽然过年不回去，但想到明天上完班就放假了内心多少有点激动。工作上的事情不要紧的已经没心情再看了，加之今天领导不在 哈哈哈... 搞点自己的爱好！
看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 class="title">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；即可 ；其他做法 与上面产生原因对应解决即可
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：从HTML入手，学习信息架构_html/css_WEB-ITnoseNächster Artikel：十大开源Android应用程序的开发框架_html/css_WEB-ITnose