ホームページ > 記事 > ウェブフロントエンド > CSS3学習メモ(3) - 左から右へ飛んでくるテキスト_html/css_WEB-ITnose
CSS3学習メモ(3) - 左から右へ飛んでくるテキスト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:451292ブラウズ
数日前、会社の採用アニメを見てとても素敵だなと思ったのですが、その中にフライングエフェクトを使った会社紹介文があったので、今日書いてみたらなかなかいい感じでした～(? ??) /~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 class="company_name">上海世茂集团企业招聘</h2> <h5 class="company_introduce">世茂集团，是以房地产开发为主的国际化企业集群，房地产界领袖企业之一。</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 までご連絡ください。