CSS3 の素晴らしい新機能_html/css_WEB-ITnose

出典: http://www.cnblogs.com/tom-zhu/p/5226096.html

今では誰もが Html5 と CSS3 に精通していると思いますが、CSS3 のどの新機能が私たちの価値があるのか注意はどうですか？

まず、いくつかのレンダリングを見てみましょう。これらのレンダリングを見ると、これらの効果が CSS だけを使用してどのように実現されるかについて必ず考えられると思います。

1. 3D 正方形とアニメーション (Webpack を使用したことがあるなら、Webpack のアニメーション ロゴを見たことがあるはずです。私の妻は、人気のあるアニメーション ロゴはもう静的なものではないと言いました。)

2.境界線の動き

3. CSS 押し出し効果

上記の効果の中で注目すべき機能は次のとおりです:

1. 背景にグラデーションを設定する CSS 線形グラデーション、

背景を追加しました。 Linear-gradient( yellow 0%, #000 80%); /*黄色 0% から黒 80% へのグラデーション*/

2, CSS 3D

perspective: ビューの位置を撮影時のレンズ位置として表示します。写真。

transform-style の preserve-3d この属性が設定されている場合、子要素は 3D ビューでラップされます。

3. CSS アニメーション

アニメーションといえば、jQuery アニメーションについて話さなければなりません。しかし、CSS3 では、アニメーションに JS は必要なくなりました。

keyframes は、パーセンテージに基づいて、または from と to を使用して設定できるフレーム アニメーションを定義します。

アニメーションを使用して、定義されたキーフレームのフレームアニメーションを参照します。アニメーション:回転 20 秒無限リニア; /*参照するアニメーション、アニメーション時間、アニメーション タイミング関数、アニメーション メソッドを設定します*/

@keyframes rotate {            0% {                transform: rotateX(0deg) rotateY(0deg);            }            100% {                transform: rotateX(360deg) rotateY(360deg);            }        }

4. CSS フィルター

フィルターは IE のフィルターではなく、新しく追加された属性ですCSS3 。

含まれるエフェクト: グレースケール、セピア、彩度、色相回転、反転、不透明度、明るさ、コントラスト、ぼかし、ドロップシャドウ

押し出しエフェクトは、フィルターのぼかしと彩度を使用して混合されます。