css3移行メモ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

css3移行メモ_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:40 AM

CSS3 Transition

CSS3 トランジションを使用すると、CSS プロパティ値を一定の時間間隔内でスムーズに遷移させることができます。この効果は、マウスのクリック、フォーカス、クリック、または要素への変更によってトリガーされ、CSS プロパティ値をスムーズにアニメーション化します。

transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]

transition-property: トランジションの CSS プロパティを指定します。
transition-duration: 移行が完了するまでに必要な時間を指定します。
transition-timing-function: 遷移速度調整関数を指定します。
transition-lay: トランジションが開始されるまでの遅延時間を指定します。

transition 属性は、border 属性や font 属性と似ており、省略したり、別々に記述したりできます。省略する場合、各機能はスペースで区切られ、特定の順序で配置する必要があります。さらに、複数のトランジション属性を操作する場合は、それらをカンマで区切ります。以下の通り:

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>   div{       width:50px;       height:100px;       background:#ffd800;       /*分开使用transition的扩展属性*/       transition-property:width,height,background;       transition-duration:1s;       transition-timing-function:ease;       transition-delay:.2s;       /*使用transition简写属性*/       transition:width 1s ease .2s,height 1s ease .2s,background 1s ease .2s;   }   div:hover{       width:100px;       height:50px;       background:#00ff90;   }</style></head><body>	<div></div></body></html>

transition-property 構文:

transition-property:no | all | <single-transition-property> [, <single-transition-property>] *

none: スタイルは指定されていません。
All: デフォルト値。transition-property 属性をサポートする、指定された要素のすべてのスタイルを示します。
: 1 つ以上のスタイルを指定します。
すべてのスタイルがトランジションのトランジションプロパティを適用できるわけではありません。色、長さ、グラデーションなどのトランジション効果を適用できるのは、中間値を持つスタイルのみです。

transition-duration syntax

transition-duration:<time> [,<time>] *

は数値で、単位は s (秒) または ms (ミリ秒) で、デフォルト値は 0 です。複数の遷移属性がある場合、複数の遷移時間を設定してそれぞれの遷移属性を適用することも、1 つの遷移時間を設定してすべての遷移属性を適用することもできます。

transition-timing-function syntax

transition-timing-function:<single-transition-timing-function> [,<single-transition-timing-function>] *

Single transition function

は、主に次の属性値を含む単一の遷移関数を指します。
ease: デフォルト値、要素スタイルが初期状態から終了状態に遷移するとき、速度は速いから遅いまで徐々に遅くなります。
Linear: 要素スタイルは初期状態から最終状態まで一定の速度で遷移します。
ease-in: 要素スタイルが初期状態から終了状態に遷移するとき、速度がどんどん速くなり、加速された状態を示します。この効果をフェード効果と呼びます。
ease-out: 要素スタイルが初期状態から終了状態に遷移するとき、速度がどんどん遅くなり、減速状態を示します。この効果をフェード効果と呼びます。
ease-in-out: 要素スタイルが初期状態から終了状態に変化するとき、最初に加速し、次に減速します。この効果をフェードイン効果と呼びます。

Cubic Bezier Curve: より正確な遷移関数を定義するために使用されます。

3 次ベジェ曲線を定義するための構文は次のとおりです:

cubic-bezier(p0,p1,p2,p3)

各ポイント値には 0% から 100% に相当する 0 から 1 の値のみが許可されます。p0 と p3 の値は次のとおりです。これらは常に始点座標 (0 ,0) と終点座標 (1,1) を表します。したがって、p1とp2のポイント値を設定するだけで済みます。

は、オンラインの 3 次ベジェツールを使用してシミュレーションおよび実装できます。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>   div{       width:50px;       height:100px;       background:#ffd800;       transition-property:width,height,background;       transition-duration:1s;		/*定义了三次贝塞尔曲线函数，p1的坐标是(.57,.07),p2的坐标是(.69,.16)*/       transition-timing-function:cubic-bezier(.57,.07,.69,.16);       transition-delay:.2s;   }   div:hover{       width:100px;       height:50px;       background:#00ff90;   }</style></head><body>	<div></div></body></html>

steps()関数:操作フィールド全体を同じサイズの間隔に分割するために使用され、各間隔は等しいです。

steps(<integer> [, [start | end]]?)

最初のパラメータは数値で、主にsteps()関数の間隔数を指定するために使用されます。この値は0より大きい正の整数でなければなりません。
2番目のパラメータはオプションで、デフォルト値はendです。

Transition-timing-function:steps (3, start);

アニメーションのステップ効果は各ステップの先頭からジャンプするので、ステップは3/1になります。 3/2、3/3 。

Transition-timing-function:steps (3, end);

アニメーションのステップ効果は各ステップの最後からジャンプするので、ステップは0、3ということになります。 /1、3/2。

transition-lay 構文

transition-delay:<time> [, <time>] *

Transition-lay: アニメーションの実行開始時間、つまり、要素の属性値を変更してからトランジション効果の実行を開始するまでにかかる時間を指定するために使用されます。正の値にすることもできます。整数、負の整数、および 0。ゼロ以外の場合、単位は s (秒) または ms (ミリ秒) に設定する必要があります。
正の整数の場合は、わかりやすい、つまり、遷移の開始が数秒遅れます。負の整数の場合、要素の前回の時間、つまり、に使用された値が切り捨てられます。遷移時間から遷移遅延の遅延値を差し引いた値の間の値は発生せず、遷移の残りの値に直接ジャンプします。

CSS3 トランジションの基本的な知識はすでに習得しています。簡単に言うと、それは 4 つの値を持つ 1 つの属性です。次に、コードを数回入力して各値の効果を体験するだけで理解できるようになります。。

声明

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

HTMLの目的：Webブラウザがコンテンツを表示できるようにするMay 03, 2025 am 12:03 AM

HTMLの中心的な目的は、ブラウザがWebコンテンツを理解して表示できるようにすることです。 1。HTMLは、タグなどのタグを介してWebページの構造とコンテンツを定義します。 3.HTMLは、ユーザーの相互作用をサポートするフォーム要素を提供します。 4. HTMLコードの最適化は、HTTP要求の削減やHTMLの圧縮など、Webページのパフォーマンスを改善できます。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。