HTML 및 CSS를 사용하여 마우스 오버 시 버튼 흔들기

이 튜토리얼에서는 HTML과 CSS를 사용하여 사용자 마우스 오버 시 버튼을 흔드는 방법을 배웁니다. 흔들기 버튼을 만들면 앱의 사용자 경험을 더욱 매력적으로 만들 수 있습니다.

HTML 요소를 흔들려면 CSS "키프레임" 규칙을 사용하여 사용자 정의 애니메이션을 만들어야 합니다. 그런 다음 사용자 정의 키프레임을 "애니메이션" CSS 속성의 값으로 사용하여 사용자가 버튼 위로 마우스를 가져갈 때 버튼을 흔들 수 있습니다.

문법

사용자는 다음 구문에 따라 HTML 및 CSS를 사용하여 마우스 오버 버튼을 흔들 수 있습니다.

위 구문에서는 버튼에 흔들기 애니메이션을 추가하는 사용자 정의 CSS 규칙을 만들었습니다. 사용자는 "animation_time"을 시간 단위로 바꾸고 "repetition"을 숫자로 바꾸어 애니메이션을 반복할 수 있습니다.

Example

Example

아래 예에서는 버튼을 수직으로 흔듭니다. "button" 태그를 사용하여 일반 HTML 버튼을 만들고 "btn" 클래스 이름을 지정했습니다. 클래스 이름을 사용하여 버튼에 액세스하고 스타일을 지정합니다.

CSS에서는 사용자가 버튼 위로 마우스를 가져갈 때 버튼에 "흔들기" 키프레임을 추가하기 위해 "애니메이션" 속성을 사용합니다. Shake 키프레임에서는 버튼을 애니메이션 시간의 0%에서 "0도", 시간의 20%에서 "5도", 시간의 50%에서 "0도", 50에서 "0도"를 회전합니다. 애니메이션 시간의 % 시간 회전 버튼 "5도" 시간의 70%는 "0도"이고 시간의 100%는 "0도"입니다.

출력에서 사용자는 버튼이 수직 방향으로 흔들리는 것을 관찰할 수 있습니다.

Example

Example

아래 예에서는 HTML과 CSS를 사용하여 버튼을 수평으로 흔듭니다.

Example

Example

아래 예시에서는 버튼을 가로, 세로로 흔드는 방법을 배워보겠습니다. 'transform' CSS 속성의 값으로 'translate()'와 함께 'translateX()'를 사용합니다.

'translateX()' 함수는 버튼을 수평으로 이동시키고, 'rotate()' 함수는 버튼을 수직으로 이동시킵니다. 출력에서 사용자는 버튼 위로 마우스를 가져가면 버튼이 수평 및 수직으로 약간 움직이는 것을 볼 수 있습니다. 그러나 사용자는 'translateX()' 함수의 매개변수 값을 늘려 수평 방향으로 더 디더링할 수 있습니다.

결론

이 튜토리얼에서 사용자는 CSS만 사용하여 HTML 버튼을 지터링하는 방법을 배웠습니다. 첫 번째 예에서는 버튼을 수직으로 흔드는 방법을 배웠습니다. 두 번째 예에서는 버튼을 수평으로 흔드는 방법을 배웠고, 마지막 예에서는 버튼을 수평 및 수직으로 흔드는 방법을 배웠습니다.

위 내용은 HTML 및 CSS를 사용하여 마우스 오버 시 버튼 흔들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!