CSS3画像混合の使い方

php中世界最好的语言オリジナル: 2017-12-01 11:30:141783ブラウズ

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 サイトの他の関連記事に注目してください。