CSS content改行技術による文字animation loading効果の実現
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5753
一、以前の私の文字loading実現
文字打点アニメーションの実装については、私は以前
box-shadowシミュレーションを使用したことがあります.また、border+backgroundシミュレーションを使用したことがあります.また、text-shadow実装を使用したことがあります.また、今年最も良い実装と考えられているCSS 3ch単位の実装を利用しています.そして、私は今日やっと発見して、もとは本当に1山がまだ1山の高さがあって、1つのもっと巧みな文字がアニメーションを打つことがあって、CSS contentコンテンツ生成技術とCSS 3 animationを利用して実現して、しかもほとんど何の不足もなくて、ここでみんなにどのように実現することを展示します.
CSSコードは以下の通りです.
dot {
display: inline-block;
height: 1em; line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap; /* white-space: pre */
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}HTMLコードは次のとおりです.
... そして達成は達成!また、IE 6-IE 9は完全に自動的に下向きに互換性があり(静的3点)、IE 10+はアニメーションです.
あなたはここをひどくクリックすることができます:content文字生成はCSS 3 animationポイントアニメーションdemoに合わせて
二、content改行技術は知っているが、肝心なのは創意と構想である。
上記の技術を分解すれば、実はすべて知っています.2つのポイントは、1つはcontent文字コンテンツ生成の改行実装、2つはCSS 3 animationアニメーションです.
1.
content改行技術について私の前のこの「CSS(Unicode文字)を使ってinline水平要素を改行させる」という文章について詳しく紹介したが、'\A'は改行文字の中のLF文字を指し、そのunicode符号化は000Aであり、CSScontent属性では直接'\A'と書く.改行文字にはLF文字に加えてCR文字があり、Unicode符号化は000Dであり、CSScontent属性では'\D'と直接書く.CR文字とLF文字は、それぞれリターン(CR)と改行(LF)を指す.2.CSS 3
animationについて紹介した文章はもっと多い.CSSのこのような言語のすばらしさは、よく勉強するには、技術の蓄積だけでなく、細部がしっかりしているだけでなく、創意と構想も必要だとよく言われています.だから、CSSがよく勉強するには、そんなに言えない天賦が必要だと言っています.この天賦は創造的な思考と発散的な思考だと思います.これは一目瞭然な論理言語とは違います.結局、私たちはすばらしい効果といろいろなレイアウトのためにサービスしています.
ここに戻って、私はよく考えてみる必要があります.私はここ数年、时々もっと良い実現があるかどうかを考えています.
content内容改行技術とCSS 3 animationの属性をよく知っていますが、私はこのような実現を考えていません.自分の考えがまだ広くないことを説明しています.その中で関連がつながっていません.ああ、自分に疑問を抱いています.本文は
contentを利用して文字の打点loading効果を実現して私はこのgithubプロジェクトで見たのです:tawian/text-spinnersもちろん、私自身がまだ少し喜んでいるのは、巨人の肩に立って、私の細部は元の実現よりもよくて、幸いにもhackテクニックを使って実現していないすべてのブラウザの完全な互換性(animationをサポートしていないブラウザの静的な3つの点)で、元の実現は直接IE 9-IE 6ブラウザを省略して、直接点がありません.
従来の実装
contentは使用された::afterダミー要素が使用され、displayはinline-tableに設定され、1行目は1点であり、コードは以下の通りである..loading::after {
display: inline-table;
content: "\A.\A..\A...";
white-space: pre;
animation: spin4 2s steps(4) infinite;
}私の実現はカスタマイズされた
::before偽要素を使用し、displayはblockに設定され、1行目は3ポイントで、コードは以下の通りです.... dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}カスタム
::beforeダミー要素、displayがblockに設定されているのは、他の現代ブラウザが元の3個の点を見えない最下部に押すことができ、contentが挿入された1行目の3個の点を表示するためである.すると、ブラウザ全体が良好に表示されます.このようにしてこそ、創意も重要であり、基礎と細部も無視できない.このようにしてこそ、完璧な効果を実現することができる.
三、content文字生成はCSS 3 animation各種類の文字loading効果に合わせて実現する
実は、
3文字生成はCSS 3contentと協力して実現できるのは、この文字のアニメーション効果を打つだけでなく、他の面白い文字を使って時間をかけてより面白いloading効果を実現することができます.以下のスクリーンショット(このプレゼンテーションページから切り取ります):たとえば、コマンドラインで一般的なloadingアニメーション実装は、
animationを次の値に設定すればよい..loading::after {
display: inline-table;
content: "/\A–\A\\\A|";
white-space: pre;
animation: spin4 2s steps(4) infinite;
}ここでは一つ一つ紹介しないで、興味のある学生は直接このプロジェクトに行って見物することができます.
四、終わりの言葉
学習と成長はこのようなことで、快適な区にいて、いつも自分がとても良いと感じて、自分が仕事をするのが速くて、技術が悪くて、実際にはまだ遠いです.ここの打点アニメーションの実现のように、以前
contentを使って実现した时、とてもすごいと思って、自分のアイデアと考えに感心しました;そして今年7月にtext-shadow単位を研究したところ、これまでの頭痛の幅の処理に解決策があったことがわかり、自分がいいと思っていたchが「パチ」を実現して顔を殴った.それからわずか4ヶ月で、また顔を殴って、text-shadow改行文字シミュレーションを使って明らかにもっと上の階に上がることができて、今自分でまたこのような実現が最も良い実現だと思っていますが、私の心の中では、いつもっと良い実現が現れるか知っています.だから、傲慢をやめてイライラをやめて、学は果てしなくて、永遠に自慢しません!
最后に、私达は自分の思惟を発散することができて、上の多くの文字loadingは水平にアニメーションを打つ以外に、その他の効果はすべて比较的に粗くて、直接プロジェクトの中で使うことができなくて、しかし、私达は
ch技术があるのではありませんかを知っていて、粗い文字を精緻な図形にマッピングすることができます.そこで、もっと繊細なグラフィックアニメーションを実現するには、簡単です.カスタマイズされたグラフィックフォントを作ることができますか.それから、ここのloading原理を利用して、かわいい繊細なアニメーションの効果がたくさん出てきました.例えば、いいねを言うときは、礼花を入れます.削除アイコンをクリックすると、ゴミ箱がアニメーションを開きます.このような実现は以前contentあるいはJS実现よりもっと简単にコントロールできます(大きさ、色など)、どうせ私は机会を探してプロジェクトの中で使って、あなた达は自分で见ています!にこにこ......読書に感謝します.交流を歓迎します.
転載先:http://www.zhangxinxu.com/wordpress/?p=5753