이미지나 아이콘 위에 마우스를 올려 번역하려면 어떻게 해야 하나요?

웹 개발에서 상호작용은 기억에 남는 사용자 경험을 제공하는 데 핵심입니다. 일반적인 기술은 이미지나 아이콘 위로 마우스를 가져가면 더 많은 정보를 표시하거나 모양을 변경하는 것입니다. 이미지나 아이콘 위에 마우스를 올려 번역하는 것은 웹사이트에 움직임과 흥미를 더할 수 있는 좋은 방법입니다.

이 글에서는 마우스 오버 시 이미지나 아이콘을 번역하는 방법을 알아봅니다. 이 작업을 수행하기 위해 HTML과 CSS만을 사용하여 다양한 방법을 배우겠습니다.

마우스를 올리면 이미지나 아이콘을 번역하는 다양한 방법

방법 1: CSS 전환 효과

마우스를 올리면 이미지나 아이콘을 번역하는 첫 번째 방법은 CSS 전환을 사용하는 것입니다. CSS 전환은 요소 위로 마우스를 가져갈 때와 같이 속성 값을 원활하게 변경하는 데 사용됩니다. 전환을 사용하면 애니메이션의 지속 시간과 시간 기능을 지정할 수 있습니다.

문법

다음은 CSS 전환을 사용하여 이미지나 아이콘을 변환하는 구문입니다.

으아아아

예

아래 예에서는 클래스 이름이 "trans-image"인 이미지 태그를 사용하고 있습니다. CSS 섹션에서는 전환 속성을 0.3초의 지속 시간인 "transform"으로 설정하고 "ease-in-out" 여유 기능을 사용합니다. 요소 위로 마우스를 가져가면 변환 속성이 ​​이미지인 경우 오른쪽으로 30픽셀, 아이콘인 경우 오른쪽으로 20픽셀 이동하도록 설정합니다.

으아아아

방법 2: CSS 애니메이션

마우스를 올리면 이미지나 아이콘을 번역하는 첫 번째 방법은 CSS 애니메이션을 사용하는 것입니다. CSS를 사용하면 JavaScript나 Flash를 사용하지 않고도 HTML을 사용하여 요소에 애니메이션을 적용할 수 있습니다. 여기서 우리는 원하는 만큼 CSS 속성을 원하는 만큼 변경할 수 있습니다.

CSS 애니메이션을 사용하려면 먼저 애니메이션에 일부 키프레임을 할당해야 합니다. 키프레임은 특정 시점의 요소 스타일을 결정합니다. 애니메이션을 사용하면 전환보다 더 복잡하고 역동적인 효과를 만들 수 있습니다.

문법

아래는 CSS 애니메이션을 사용하여 이미지나 아이콘을 변환하는 구문입니다.

으아아아

예

아래 예에서는 "icon" 클래스에 "i" 태그를 사용하고 "image" 클래스에 태그를 사용합니다. 여기서는 표시 속성을 "inline-block"으로 설정했습니다. 또한 애니메이션 속성을 "translate"로, 지속 시간을 0.3초로, easing 기능을 "ease-in-out"으로 설정했습니다. 이제 마우스를 올리면 키프레임을 사용하고 애니메이션 이름을 "translate-hover"로 설정하여 아이콘과 이미지를 오른쪽으로 10픽셀 이동한 다음 후속 마우스 오버 시 오른쪽으로 20픽셀 이동합니다.

으아아아

방법 3: CSS 그리드

마우스를 올렸을 때 이미지나 아이콘을 번역하는 첫 번째 방법은 CSS 그리드를 사용하는 것입니다. CSS 그리드는 행과 열이 있는 그리드 기반 레이아웃 시스템을 사용하므로 부동 및 위치 지정을 사용하지 않고도 웹 페이지를 더 쉽게 디자인할 수 있습니다. 여기서는 Grid-row 및 Grid-column 속성을 사용하여 그리드 항목의 위치를 ​​지정한 후 번역할 그리드 항목에 회전, 이동 등의 CSS 변환 속성을 적용합니다.

문법

아래는 CSS Grid를 사용하여 이미지나 아이콘을 변환하는 구문입니다.

으아아아

예

아래 예에서는 "container" 클래스로 "div" 태그를 정의했습니다. 여기서 CSS에서는 표시 속성을 "grid"로 설정하고 각각 3개의 열과 3개의 행으로 구성된 그리드 템플릿을 정의했습니다. 분수 단위는 1입니다. 이미지와 아이콘을 변환하기 위해 전환 속성을 사용하여 0.3초의 지속 시간으로 "변환"하고 마우스를 올리면 이미지나 아이콘을 변환하는 "ease-in-out" 완화 기능을 사용했습니다. 오른쪽으로 10픽셀.

으아아아

결론

웹사이트에 상호작용성을 추가하면 사용자 경험을 향상시킬 수 있으며, 이를 달성하는 한 가지 방법은 마우스를 올리면 이미지나 아이콘을 번역하는 것입니다. 이 효과는 HTML과 CSS를 사용하여 얻을 수 있으며 CSS 전환, 애니메이션 또는 그리드를 사용하는 등 다양한 방법으로 얻을 수 있습니다. 이러한 모든 방법을 사용하면 애니메이션의 지속 시간과 시간 기능을 지정하고 동적 효과를 만들 수 있습니다. 이러한 기술을 사용하면 방문자에게 깊은 인상을 줄 수 있는 더욱 매력적인 웹사이트를 만들 수 있습니다.

위 내용은 이미지나 아이콘 위에 마우스를 올려 번역하려면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!