ホームページ > 記事 > ウェブフロントエンド > CSS3画像混合の使い方
CSS3 の強力な特殊効果機能を利用して、画像 に素晴らしい効果を生み出すことができることがわかっています。 ブレンド モードとは、上位レイヤーの画像を下位レイヤーの画像に統合するときに使用されるさまざまなモードを指します。以下のケースリストを参照してください
1.transform-origin
CSS変換の原点、デフォルトはオブジェクトの中心点です。 transform-origin は 2 つのパラメータを受け入れます。これらのパラメータは、パーセンテージ、em、px などの特定の値、または left、right、center、top、middle、bottom などのキーワードにすることができます。
例:
transform-origin: 右上;-o-transform-origin: 右上;-moz-transform-origin: 右上;-webkit-transform-origin: 右上;
transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;
transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;
transform-origin: 50% 100%;-o-transform-origin: 50% 100%;- moz -transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;
2. Transition--Transition
1.transition-property: 変換アニメーションの CSS プロパティ名を定義します。 。 none|all|CSS プロパティ リストを指定できます。
例:
transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition-property:background-color;
2.transition-duration: トランジションアニメーションの長さを定義します。
例:
transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;
3.transition-lay: トランジションを定義します。アニメーションの遅延時間。
例:
transition-lay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;
4.transition-timing-function:定義 トランジションアニメーションの効果。
値は次のとおりです:
ease: 緩和効果。
イーズイン: 段階的な効果。
イーズアウト: フェード効果。
イーズインアウト: フェードインおよびフェードアウト効果。
リニア: 線形効果。
cubic-bezier: 特別な 3 次ベジェ曲線効果。 3次ベジェ(0.3, 0, 0.5, 1.0)。
例:
transition-timing-function: 線形; -o-transition-timing-function: 線形; -webkit-transition-timing-function: 線形;
三、アニメーション
1.animation-name: アニメーション名。
2.animation-duration: アニメーション時間。
3.animation-timing-function: アニメーションの再生メソッド。
4.animation-delay: アニメーションの開始時間。
5.animation-iteration-count: 再生回数。無限とは無限の回数を意味します。 。
6.animation-direction: アニメーションの再生方向。通常 - アニメーションの各サイクルが前進します。交互 - 偶数回前進し、奇数回後退します。
例:
div {
-webkit-transform-style: preserve-3d; -webkit-animation-name: ani; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } /* 下面调用动画 */ @-webkit-keyframes ani { 0% { -webkit-transform: rotateX(0deg); } 25% { -webkit-transform: rotateX(180deg); } 50% { -webkit-transform: rotateX(360deg); } 75% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); }
これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、php 中国語 Web サイトの他の関連記事に注目してください。
関連書籍:
CSS3 でのTransform 属性の使用に関するチュートリアル
以上がCSS3画像混合の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。