ページが読み込まれた後の関連情報のフェードイン効果_html/css

ページが読み込まれた後の関連情報のフェードイン効果_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:57:49

オリジナル

1165 人が閲覧しました

はじめに:

新年が近づき、会社の同僚の中には、新年には帰らないものの、なんだかウキウキしている人もいます。明日仕事が終わったら休みを取ろうと思って。仕事のことはどうでもいい、もう本を読む気分でもないし、今日は上司もいないし、ははは…自分の趣味に没頭しましょう！

Bootstrap の優れたサイトのセレクションを見ていたら、ページ (http://www.mikeinghamdesign.com/) が読み込まれるときにフェードイン効果が見られたので...

レンダリング :

実装アイデア:

ここでの実装では主に margin-top 属性と透明度の不透明度属性を使用します

1. フェードブロックの初期化で特定の上部マージンを設定すると、透明度は完全に透明になります。

2. ページがロードされた後、jquery のアニメーション関数を使用して特定の上部マージンを動的に減算すると、透明度は完全に不透明になります。ここでは、実行時間を 1 秒に設定します (最初に最初のフェードインブロックを実行します。表示が成功すると、コールバックは表示される 2 番目のブロックを実行します)。 🎜> 概要:

問題が発生しました: 子要素 div に margin-top を設定するときに、子要素 div には親要素 div からの上マージンがなく、親要素 div からの上部マージンがあることが判明しました。ページ全体の上マージンがあった;

<!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>

ログイン後にコピー

問題の原因: オンライン Firefox で情報を検索して確認した結果、次の結論に達しました: 2 つのネストされた div の間に空でない要素がない場合親 div と子 div、親要素 div には上部のパディングがなく、親要素には上部の境界線がない場合、2 つの div は上部のマージンが共有されます。

問題の解決策: 通常は overflow: hidden を追加します。 ; 親要素へ; 他のメソッドは上記の理由に応じて解決できます