CSS를 사용하여 마우스를 위로 움직일 때 아이콘의 회전 효과를 얻는 방법에 대한 자세한 설명
- 小云云원래의
- 2017-12-19 11:17:222833검색
마우스업 아이콘 회전 효과는 기업 프로젝트에서 자주 사용되는데, 특히 상단 내비게이션 바에서는 마우스업 아이콘 회전 효과를 구현하기 위한 CSS를 주로 소개하고 있으니 참고하시면 좋겠습니다. 모든 사람.
다음 단계는 CSS를 사용하여 마우스가 위로 움직일 때 아이콘 회전 효과를 얻는 것입니다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p,img,body{
margin: 0;
padding: 0;
}
.box{
height: 150px;
width:300px;
background: #1b7b80;
margin: 0 auto;
padding: 20px;
}
.box:hover img{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
img{
margin: 0 auto;
display: block;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
</style>
</head>
<body>
<p class="box">
<img src="img/down.png" alt=""/>
</p>
</body>
</html>여기에 상자가 배치되어 있고, 상자 안에는 그림이 더 잘 보이도록 여기에 더 큰 그림이 배치되어 있습니다. 이제 얻을 수 있는 효과는 마우스를 .box 상자 위로 이동할 때 img 아이콘이 180도 회전한다는 것입니다.
style에서 핵심은 img 및 .box:hover img 설정입니다. 먼저 img에 대한 전환 속성을 설정해야 합니다. 여기서 속성은 애니메이션 방법과 기간을 지정합니다. 그런 다음 마우스가 위로 움직일 때 img를 180도 회전하도록 .box를 설정합니다. hover:
transform: rotate(180deg);
-webkit-과 같은 아래 설정은 주로 다양한 제조업체의 브라우저와 호환되도록 설정됩니다.
얻은 효과는 아래 그림과 같습니다.
관련 권장 사항:
HTML에서 마우스가 끝났을 때 전체 줄(tr)의 색상을 변경하는 방법
방법 CSS를 사용하여 마우스를 위에 올리면 그림이 회색으로 변합니다
요소를 마우스로 클릭하면 html의 onclick 이벤트 속성이 실행됩니다
위 내용은 CSS를 사용하여 마우스를 위로 움직일 때 아이콘의 회전 효과를 얻는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!