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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:57 AM

はじめに:

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

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

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

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。