ホームページ > 記事 > ウェブフロントエンド > 週末コーディングに苦労し、css3_html/css_WEB-ITnose のパワーに震えていました
週末コーディングに苦労し、css3_html/css_WEB-ITnose のパワーに震えていました
- WBOYオリジナル
- 2016-06-24 11:53:321249ブラウズ
数週間見ていなかった『ウォーキング・デッド』と『ビッグバン セオリー』を週末に見終えました（ビッグ・A・ステーション、ありがとう！）。人生は本当に空しいと感じました。これでゲームに興味がなくなるとは思いませんでした。 ！ ！コードの魔法は本当に言葉では言い表せません。 。 。 (私は本物か偽物か...) 退屈だったので、空っぽの魂を満たすために、崇高なテキストをコンピューターにインストールし、数行のコードを書く準備をしました。春風が瀘沽湖を吹き抜け、秋の雨が九寨溝に染み込むような気分です。 （私は弟です…シャオ・イーダではありません…） 特にcss3の様々な効果がカッコよくて爆発的だと感じています。 Webフロントエンドは驚きに満ちたプログラミングの仕事だと実感しています！
余談になりますが、sublime text3をインストールすると、構文は問題ないのですが、css3の構文がすべてハイライト表示されなくなります。実行はできますが、CSSハイライトと比べると、強迫性障害の私にはどう見てもぎこちないです。 Baidu で Google を通じて解決策を見つけました。みんなと共有しましょう。
比較写真をご覧ください:
左側はハイライトされておらず、右側はハイライトされているのですが、どういうわけか酸っぱく見えると思いませんか？
1. まずsublime text3を開き、次にctrl+shift+p、コンソール(パッケージコントロール)を開き、[リポジトリの追加]を選択し、次のURLを入力します: https://github.com/i-akhmadullin/Sublime-CSS3
2. 次に、「パッケージのインストール: Sublime-CSS3」を選択します。
3. メニューの [表示] > [文法] > をクリックして、現在の拡張子を持つファイルを開きます。 。 。 > CSS3 が完了しました。
メソッドソース: https://github.com/i-akhmadullin/Sublime-CSS3 (外国人の達人が多すぎる〜しかも全員外国人コーダーで、すごいですね！)
本題に戻ります、この二人私は何日も CSS3 の効果を研究してきましたが、その移行によってもたらされた魔法のような感覚をここで皆さんと共有したいと思います。
Transition（トランジションエフェクト）には、transition-property（トランジションエフェクトの属性名）、
、
transition-dalay（トランジションエフェクトの遅延が有効）の4つの属性値があります。
transition属性にも略語があります、つまり上記の順番で書くだけです。次のコードは次のとおりです。幅は変更され、変更期間は 2 秒、従う時間関数は均一、遅延は 2 秒です。
-webkit-transition:width 2s linear 2s,
以下は私が自分で書いたデモです。効果を実感していただけます。
HTMLコードは次のとおりです:
<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>过渡</title> 6 <link rel="stylesheet" type="text/css" href="过渡.css"> 7 </head> 8 <body> 9 <div>效果展示</div>10 </body>11 </html>
CSSコードは次のとおりです:
div{ width:100px; height:100px; background-color: blue; -webkit-transition:width 2s,height 2s ,-webkit-transform 2s;/*简写方式 改变的属性名 改变时长*/ -webkit-transition-timing-function:cubic-bezier(0.25,0.1,0.251); /*改变的时间函数 linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) */ -webkit-transition-delay:1s; /*改变效果延时响应*/}div:hover{ width:200px; height: 200px; -webkit-transform:rotate(1080deg);} 説明が必要なことの1つは、transition-timing-function属性です。プリセットの線形イージングに加えて、属性値もベジェ曲線関数に従い、その後に 0 から 1 までの 4 つのパラメーターが続きます。興味があれば調べてみてください。
皆様のIT道がますます広くなりますように！ゴジラはあなたと一緒に歩きます！