CSS3 애니메이션에 여러 변형 효과를 추가하는 방법(코드 예)

이 문서에서는 CSS3 애니메이션(코드 예제)에 여러 변형 효과를 추가하는 방법을 설명합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이전 글 [css3 애니메이션의 변형 속성과 전환 속성의 간단한 활용]에서 간단한 애니메이션 변형을 구현하기 위해 변형 효과를 추가하는 방법을 소개했지만, 변형 효과가 하나만 있는 애니메이션은 너무 단조롭습니다. . 여러 변형 효과를 추가하는 방법은 무엇입니까? 아래에서는 여러 변형 효과를 추가하는 방법을 소개합니다.

먼저, 요소의 다중 변형이 어떤 모습인지 살펴보겠습니다.

왼쪽 상자는 작은 녹색 사각형 모서리로 시작하고 오른쪽 상자는 빨간색 테두리와 둥근 모서리로 더 큽니다. 두 상자 중 하나 위로 마우스를 가져가면 상자 1이 상자 2의 모양을 취하고 그 반대로 만드는 애니메이션이 트리거됩니다.

다시 말하지만, 우리는 이를 달성하기 위해 여전히 HTML과 CSS만 사용하고 있습니다. CSS 변환이 없으면 두 상자는 여전히 테두리 색상과 테두리 반경을 변경하지만 1초 애니메이션이 아닌 즉시 발생합니다.

그렇다면 이 효과는 어떻게 달성되는 걸까요?

단일 요소에 여러 변형을 적용하는 것은 정말 간단합니다. 공백을 사용하여 하나씩 나열하면 됩니다. 예:

html 코드:

<div id="submenu"></div>

css 코드:

#submenu {
  	width: 100px;
    height: 60px;
    margin: 100px auto;
    background-color: #eee;
    border: 2px solid green;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
#submenu:hover {
    background-color: #fc3;
    -webkit-transform: rotate(360deg) scale(2);
    -moz-transform: rotate(360deg) scale(2);
    -o-transform: rotate(360deg) scale(2);
    -ms-transform: rotate(360deg) scale(2);
    transform: rotate(360deg) scale(2);
}

IE10은 현재 변환 접두사를 사용하지 않지만 변환에는 여전히 -ms-가 필요합니다.

즉, 상자 위로 마우스를 가져가면 다음과 같이 1초 안에 색상이 바뀌고 회전하고 크기가 조정됩니다.

지침:

변환 속성은 상자의 회전, 크기 조정, 이동 및 기울기를 제어합니다.

전환 속성은 요소의 전환 효과를 구현하여 요소가 실제로 한 상태에서 다른 상태로 이동할 수 있도록 합니다.

호환성을 고려하면 -webkit-, -moz-, -o 접두사를 사용해야 합니다. -, -ms-.

요약: 위 내용은 이 글에서 소개한 내용 전부입니다. 직접 해보고 여러 변형을 함께 넣어서 효과를 확인하고 이해를 깊게 할 수 있습니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 관련 동영상을 추천합니다:

css3 tutorial!

위 내용은 CSS3 애니메이션에 여러 변형 효과를 추가하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!