CSS3学習メモ(3) - 左から右へ飛んでくるテキスト_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3学習メモ(3) - 左から右へ飛んでくるテキスト_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:35 AM

数日前、会社の採用アニメを見てとても素敵だなと思ったのですが、その中にフライングエフェクトを使った会社紹介文があったので、今日書いてみたらなかなかいい感じでした～(? ??) /~La La La

私が作成したダイナミックなエフェクトを見てみましょう:

実際、上記のエフェクトは非常に単純ですが、私のスクリーンショットソフトウェアに問題があるため、あまり明確ではありません。、しかし、おおよその効果が画面に表示されます~~~ スクリーンショットを閉じるためにページからスクリーンショットソフトウェアにマウスを移動したため、色が赤から白に変わりました。これに邪魔されないでください~~~~

。

1. ページのメインレイアウト

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>左右淡入的企业介绍</title>        <link type="text/css" rel="stylesheet" href="css/animate.css" />    </head>    <body>        <div class="company">            <h2 id="上海世茂集团企业招聘">上海世茂集团企业招聘</h2>            <h5 id="世茂集团-是以房地产开发为主的国际化企业集群-房地产界领袖企业之一">世茂集团，是以房地产开发为主的国际化企业集群，房地产界领袖企业之一。</h5>                    </div>        </body></html>

上記は言うまでもありません ~~~~レイアウトはたった 4 文で完成します~~~私は冗長な美学のために QAQ を書くつもりはありません。最も直接的なコードは、将来のコピーを容易にするためのものです。

2. CSS スタイル (主に CSS3)

body{    overflow: hidden;  /*此处需要设置溢出隐藏，否则文字起始位移超过页面大小就会在页面下方出现横的滚动条*/}.company{    width: 400px;    margin: 0 auto;    border: 1px #999999 solid;}/*定义一个名字为lefteaseinAnimate动画，实现从页面的左边淡入页面效果*/@keyframes lefteaseinAnimate{    0%{ transform: translateX(-2000px); opacity: 0;}   /*在0%时设置文字在想X轴-2000px位移处（左边），透明度为0，也就是看不见文字*/    100%{ transform: translateX(0px); opacity: 1;}         /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/}@-webkit-keyframes lefteaseinAnimate{    0%{ -webkit-transform: translateX(-2000px); opacity: 0;}    100%{ -webkit-transform: translateX(0px); opacity: 1;}    }@-o-keyframes lefteaseinAnimate{    0%{ -webkit-transform: translateX(-2000px); opacity: 0;}    100%{ -webkit-transform: translateX(0px); opacity: 1;}    }@-ms-keyframes lefteaseinAnimate{    0%{ -webkit-transform: translateX(-2000px); opacity: 0;}    100%{ -webkit-transform: translateX(0px); opacity: 1;}    }@-moz-keyframes lefteaseinAnimate{    0%{ -webkit-transform: translateX(-2000px); opacity: 0;}    100%{ -webkit-transform: translateX(0px); opacity: 1;}    }.company_name{    animation: lefteaseinAnimate 1s ease 1;    /*调用已定义好的动画lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/    -webkit-animation: lefteaseinAnimate 1s ease 1;    -ms-animation: lefteaseinAnimate 1s ease 1;    -o-animation: lefteaseinAnimate 1s ease 1;    -moz-animation: lefteaseinAnimate 1s ease 1;        /*规定动画的最后状态为结束状态*/    animation-fill-mode:forwards;    -webkit-animation-fill-mode: forwards;        -o-animation-fill-mode: forwards;       -ms-animation-fill-mode: forwards;         -moz-animation-fill-mode: forwards; }/*定义一个名字为righteaseinAnimate动画，实现从页面的右边淡入页面效果*/@keyframes righteaseinAnimate{    0%{ transform: translateX(2000px); opacity: 0;}   /*在0%时设置文字在想X轴2000px位移处（右边），透明度为0，也就是看不见文字*/    100%{ transform: translateX(0px); opacity: 1;}      /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/}@-webkit-keyframes righteaseinAnimate{    0%{ -webkit-transform: translateX(2000px); opacity: 0;}    100%{ -webkit-transform: translateX(0px); opacity: 1;}}@-o-keyframes righteaseinAnimate{    0%{ -webkit-transform: translateX(2000px); opacity: 0;}    100%{ -webkit-transform: translateX(0px); opacity: 1;}}@-ms-keyframes righteaseinAnimate{    0%{ -webkit-transform: translateX(2000px); opacity: 0;}    100%{ -webkit-transform: translateX(0px); opacity: 1;}}@-moz-keyframes righteaseinAnimate{    0%{ -webkit-transform: translateX(2000px); opacity: 0;}    100%{ -webkit-transform: translateX(0px); opacity: 1;}}.company_introduce{    animation: righteaseinAnimate 1s ease 1;    /*调用已定义好的动画righteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/    -webkit-animation: righteaseinAnimate 1s ease 1;    -moz-animation: righteaseinAnimate 1s ease 1;    -ms-animation: righteaseinAnimate 1s ease 1;    -o-animation: righteaseinAnimate 1s ease 1;        /*规定动画的最后状态为结束状态*/    animation-fill-mode:forwards;    -webkit-animation-fill-mode: forwards;        -o-animation-fill-mode: forwards;       -ms-animation-fill-mode: forwards;         -moz-animation-fill-mode: forwards; }

まあ、上記は非常に子供っぽいと思いますが、コメントに overflow: hidden を追加する必要があることに注意してください。 ; 本文の先頭にオーバーフロー非表示を設定します。そうしないと、テキストの初期変位がページサイズを超えると水平スクロールバーが表示されます。これも、私が最終的に発見した小さな問題です。一文~~~~~

声明

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

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

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ページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。