CSS3 이미지 믹싱을 사용하는 방법

우리는 CSS3의 강력한 특수 효과 기능의 도움으로 블렌딩 모드가 그림에 놀라운 효과를 만들어 낼 수 있다는 것을 알고 있습니다. 블렌딩 모드는 상위 레이어 이미지를 하위 레이어 이미지에 통합할 때 사용되는 다양한 모드를 나타냅니다. 아래 사례 목록을 참조하세요

1.transform-origin

CSS 변환의 원점, 기본값은 객체의 중심점입니다. 변환 원본은 백분율, em, px 등과 같은 특정 값 또는 왼쪽, 오른쪽, 중앙, 위쪽, 중간, 아래쪽 등과 같은 키워드일 수 있는 두 개의 매개 변수를 허용합니다.

예:

transform-origin: 오른쪽 위;-o-transform-origin: 오른쪽 위;-moz-transform-origin: 오른쪽 위;-webkit-transform-origin: 오른쪽 위;

transform-origin: 0 0;-o-변형-원산지: 0 0;-moz-변형-원산지: 0 0;-webkit-변형-원산지: 0 0;

변형-원산지: 0 100%;-o-변형-원산지: 0 100%;-moz-변환-원산지: 0 100%;-webkit-변환-원산지: 0 100%;

변형-원산지: 50% 100%;-o-변환-원산지: 50% 100%;- moz -transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;

2. Transition--Transition

1.transition-property: 변환animation의 CSS 속성 이름을 정의합니다. . 없음|모두|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-delay: 전환 정의 애니메이션 지연 시간.

예:

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

4.transition-timing-function: 정의 전환 애니메이션의 효과입니다.

값은 다음과 같습니다:

ease: 완화 효과.

ease-in: 점진적인 효과.

ease-out: 페이드 효과.

ease-in-out: 페이드 인 및 페이드 아웃 효과.

선형: 선형 효과.

cubic-bezier: 특수한 3차 베지어 곡선 효과. 3차 베지어(0.3, 0, 0.5, 1.0).

예:

전환 타이밍 기능: 선형; -moz-전환 타이밍 기능: 선형;

三, animation

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 중국어 웹사이트의 다른 관련 기사에 주목하세요!

관련 읽기:

CSS3에서 변형 속성 사용에 대한 튜토리얼

CSS3 번역 속성에 대한 자세한 소개

프런트엔드 프로젝트에서 위치를 지정하는 여러 가지 방법

위 내용은 CSS3 이미지 믹싱을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!