CSS3에서 마우스가 위로 움직일 때 길어지는 효과를 얻는 방법은 무엇입니까? (사진 + 동영상)
- 藏色散人원래의
- 2018-10-19 16:00:136584검색
이 글에서는 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을 달성하는 방법에 대한 것입니다. 마우스를 움직일 때의 가변 길이 효과 소개도 매우 간단합니다. 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다!
프런트엔드 관련 지식을 더 알고 싶다면 PHP 중국어 웹사이트 CSS3 동영상 튜토리얼, CSS 동영상 튜토리얼, Bootstrap 튜토리얼 및 기타 관련 튜토리얼을 참조하세요. !
더 멋진 CSS3, html5, javascript 특수 효과 코드, 모든 기능: javascript 특수 효과 컬렉션
위 내용은 CSS3에서 마우스가 위로 움직일 때 길어지는 효과를 얻는 방법은 무엇입니까? (사진 + 동영상)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!