How to use CSS3 image mixing

We know that with the help of the powerful special effects function of CSS3, the blending mode can make pictures produce stunning effects. The blending mode refers to various methods used to blend the upper image into the lower image. Mode, let’s take a look at the case

1. transform-origin

The origin of CSS transformation, the default is the center point of the object. transform-origin accepts two parameters, which can be specific values ​​such as percentage, em, px, etc., or keywords such as left, right, center, top, middle, bottom, etc.

For example:

transform-origin: top right;-o-transform-origin: top right;-moz-transform-origin: top right;-webkit-transform-origin: top right ;

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: Defines the CSS property name of the transitionanimation. Can be none|all|CSS property list.

For example:

transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color; -webkit-transition-property:background-color;

2.transition-duration: Define the length of the transition animation.

For example:

transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;

3.transition-delay: Define the delay time of the transition animation.

For example:

transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;

4.transition-timing-function: Define the effect of transition animation.

The value can be:

ease: relief effect.

ease-in: Gradient effect.

ease-out: fade effect.

ease-in-out: fade-in and fade-out effect.

linear: linear effect.

cubic-bezier: Special cubic Bezier curve effect. cubic-bezier(0.3, 0, 0.5, 1.0).

For example:

transition-timing-function: linear; -o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition-timing -function: linear;

3. animation

1.animation-name: animation name.

2.animation-duration: animation time.

3.animation-timing-function: animation playback method.

4.animation-delay: animation start playback time.

5.animation-iteration-count: Number of plays. infinite means infinite times. .

6.animation-direction: animation playback direction. normal--every cycle of animation goes forward alternate--even times forward, odd times backward.

For example:

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);
}

I believe you have mastered the method after reading these cases. For more exciting content, please pay attention to php Chinese Other related articles online!

Related reading:

Tutorial on using the transform attribute in Css3

Detailed introduction to the translate attribute in CSS3

Several ways to position in front-end projects

The above is the detailed content of How to use CSS3 image mixing. For more information, please follow other related articles on the PHP Chinese website!