CSS3에서 마우스를 움직일 때 이미지의 느린 확대 효과를 얻는 방법(이미지, 텍스트 + 비디오)-CSS 지식-php.cn

CSS3에서 마우스를 움직일 때 이미지의 느린 확대 효과를 얻는 방법(이미지, 텍스트 + 비디오)

藏色散人

풀어 주다： 2018-10-12 13:44:34

원래의

14013명이 탐색했습니다.

이 글에서는 사진 위에 마우스를 올렸을 때 확대 효과를 얻을 수 있는 구체적인 방법을 주로 소개합니다.

주요 전자상거래 웹사이트를 탐색할 때 가장 흔히 볼 수 있는 사진의 동적 효과는 아마도 마우스를 사진 안으로 이동하거나 사진 위로 이동할 때 나타나는 확대 효과일 것입니다. 이러한 동적 효과를 달성하는 주요 목적은 제품 콘텐츠를 강조하고 사용자 경험을 향상시키는 것입니다.

코드 초보자에게 이 효과는 확실히 매우 매력적이지만 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>

로그인 후 복사

먼저 프런트에 방문하시면 이미지 효과는 아래와 같습니다.

CSS3에서 마우스를 움직일 때 이미지의 느린 확대 효과를 얻는 방법(이미지, 텍스트 + 비디오)