이미지의 동적 효과를 얻기 위한 CSS 관련 속성 소개

css는 picture 동적 효과를 구현합니다.

사용 방법 hover pseudo-class

@

사용 프로세스 먼저 달성할 효과를 결정하고 초기 표현을 설정합니다state@& animation

@transition 속성에 사용되는 @Css

properties

transition-property는

전환 효과를 설정하기 위한 CSS 속성을 지정합니다. 이름.

(

none 어떤 속성도 전환 효과를 얻지 않습니다.

all 모든 속성은 전환 효과를 얻습니다.

property 정의 전환 효과를 적용할 쉼표로 구분된 CSS 속성 이름 목록

)

transition-duration은 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다.

transition-timing-function은 속도 효과에 대한 속도 곡선을 지정합니다.

(

linear는 동일한 속도(3차 베지어(0,0,1,1)와 동일)로 시작하고 끝나는 전환 효과를 지정합니다.

ease 느린 속도를 지정합니다. 시작했다가 빨라지고 천천히 끝나는 전환 효과(cubic-bezier(0.25,0.1,0.25,1))

ease-in은 느린 속도에서 시작하는 전환 효과를 지정합니다. (0.42,0,1,1))

ease-out은 느린 속도로 끝나는 전환 효과를 지정합니다(3차 베지어(0,0,0.58과 동일). ,1)) Ease-in-out은 느린 속도(cubic-bezier(0.42,0,0.58,1))

cubic-bezier(n,와 동일)로 시작하고 끝나는 전환 효과를 지정합니다. n,n,n) 3차 베지어

함수

에서 자신만의 값을 정의하세요. 가능한 값은 0과 1 사이의 숫자 값입니다.

)

transition -delay는 전환 효과가 시작되는 시기를 정의합니다.

trans

for

m 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.

translateX(x)는 X축 값만 사용하여 변환을 정의합니다.

translateY(y)는 Y축 값만 사용하여 변환을 정의합니다.

scale(x,y)는 2D 스케일링 변환을 정의합니다.

scaleX(x) X축 값을 설정하여 크기 조정 변환을 정의합니다.

scaleY(y) Y축 값을 설정하여 크기 조정 변환을 정의합니다.

rotate3d(x,y,z,angle)은 3D 회전을 정의합니다.

rotateX(angle) X 축을 따라 3D 회전을 정의합니다

rotateY(angle) Y 축을 따라 3D 회전을 정의합니다

rotateZ(angle) X 축을 따라 회전을 정의합니다 Z축 축의 3D 회전

rotate(angle) 매개변수에 각도를 지정하여 2D 회전을 정의합니다. 변환 원점 설정(회전 중심점)

skew(x-angle,y-angle) X 및 Y축을 따라 2D 기울이기 변환을 정의합니다.

skewX(angle) X축을 따라 2D 기울이기 변환을 정의합니다.

skewY(angle)는 Y축을 따라 2D 기울이기 변환을 정의합니다.

위 내용은 이미지의 동적 효과를 얻기 위한 CSS 관련 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!