CSS3에서 마우스가 위로 움직일 때 길어지는 효과를 얻는 방법은 무엇입니까? (사진 + 동영상)-CSS 지식-php.cn

CSS3에서 마우스가 위로 움직일 때 길어지는 효과를 얻는 방법은 무엇입니까? (사진 + 동영상)

藏色散人

풀어 주다： 2019-11-30 16:37:44

원래의

6553명이 탐색했습니다.

이 글에서는 css3를 사용하여 이동할 때 마우스 길이를 변경하는 효과를 얻는 방법을 주로 소개합니다.

프런트 엔드 페이지 디자인에서 CSS의 기능은 매우 강력합니다. 잘 사용하면 많은 웹사이트에서 다양하고 멋진 동적 효과를 얻을 수 있습니다. 그래서 이전 글에서는 [Css3 애니메이션에서 회전 및 이동 효과를 얻는 방법? ] [css3에서 마우스를 올렸을 때 이미지의 느린 확대 효과를 얻는 방법은 무엇입니까?] 지식 포인트 소개를 기다려주세요. 필요한 친구들이 참고할 수 있습니다.

아래에서는 간단한 코드 예제를 결합하여 마우스가 div 안으로 이동할 때 CSS3가 div를 더 길게 만드는 효과를 얻을 수 있는 방법을 소개합니다.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Css3实现鼠标移上变长特效</title>
<head>
    <style>
.hover{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background: red;
    margin-top: 100px;
    margin-left: 100px;
    transition: width 2s;
}
        .hover:hover{
            background: blue;
            width: 500px;
        }
 </style>
</head>
<body>

<div class="hover">
    hover
</div>
</body>
</html>

로그인 후 복사

사실 이 효과는 매우 기본적이고 간단합니다. 주로 :hover selector 및 transition 사용법을 익히세요.

:hover selector는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용됩니다.

Transition은 전환 속성, 전환 기간, 전환 타이밍 기능 및 전환 지연의 네 가지 하위 속성을 포함하는 복합 속성입니다. 이 네 가지 하위 속성의 협력을 통해 완전한 전환 효과가 완성됩니다

그러면 전경에서 위 코드로 달성한 효과는 다음과 같습니다.

CSS3에서 마우스가 위로 움직일 때 길어지는 효과를 얻는 방법은 무엇입니까? (사진 + 동영상)