CSS3에서 마우스를 움직일 때 이미지의 느린 확대 효과를 얻는 방법(이미지, 텍스트 + 비디오)
- 藏色散人원래의
- 2018-10-12 13:44:3414018검색
이 글에서는 사진 위에 마우스를 올렸을 때 확대 효과를 얻을 수 있는 구체적인 방법을 주로 소개합니다.
주요 전자상거래 웹사이트를 탐색할 때 가장 흔히 볼 수 있는 사진의 동적 효과는 아마도 마우스를 사진 안으로 이동하거나 사진 위로 이동할 때 나타나는 확대 효과일 것입니다. 이러한 동적 효과를 달성하는 주요 목적은 제품 콘텐츠를 강조하고 사용자 경험을 향상시키는 것입니다. 코드 초보자에게 이 효과는 확실히 매우 매력적이지만 html/css 코드를 통해 달성하려는 경우 어디서부터 시작해야 할지 모를 수도 있습니다. 사실 코드 구현은 매우 간단합니다. 아래에서는 마우스 통과 후 이미지를 확대하는 방법을 간단한 예를 통해 소개하겠습니다.마우스 이동 시 이미지 확대 효과에 대한 샘플 html/css 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html/Css3实现图片缩放</title>
<style type="text/css">
#div1{
width: 500px;
margin: 150px auto;
}
#div1 img{
transition: all 0.5s;
border-radius:5px;
border: #eee solid 2px;
}
#div1 img:hover{
transform: scale(1.5);
}
</style>
</head>
<body style="background: #000">
<div id="div1">
<img src="123123.png" / alt="CSS3에서 마우스를 움직일 때 이미지의 느린 확대 효과를 얻는 방법(이미지, 텍스트 + 비디오)" >
</div>
</body>
</html>먼저 프런트에 방문하시면 이미지 효과는 아래와 같습니다.
border-radius: div 요소에 둥근 테두리를 추가합니다.
:hover 선택기는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용됩니다.
transform : 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다. 여기서, 값 scale(x,y) 2D 스케일링 변환을 정의합니다. (이 예에서는 이미지 확대/축소를 1.5배로 설정합니다.)
transition: 4개의 전환 속성을 설정하는 데 사용되는 단축 속성입니다. (이 예제에서는 이미지가 너무 갑작스럽게 확대되는 것을 피하기 위해 이미지를 확대할 때 전환 시간을 0.5초로 설정했습니다.)
이 문서에서는 html/css/css3을 사용하여 마우스가 이미지 위로 지나갈 때 이미지가 확대되는 효과를 얻는 방법에 대해 설명합니다. 매우 간단하고 이해하기 쉬우므로 도움이 필요한 친구들에게 도움이 되길 바랍니다! HTML/css에 대해 더 자세히 알고 싶다면 PHP 중국어 웹사이트HTML 비디오 튜토리얼과 CSS 비디오 튜토리얼, CSS3 비디오 튜토리얼을 따라가세요. 누구나 참고하고 배울 수 있습니다!
위 내용은 CSS3에서 마우스를 움직일 때 이미지의 느린 확대 효과를 얻는 방법(이미지, 텍스트 + 비디오)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.