CSS를 사용하여 마우스가 위로 움직일 때 아이콘 회전 효과를 얻는 방법
- 不言원래의
- 2018-06-20 16:00:302504검색
이 글은 주로 마우스업 아이콘 회전 효과를 구현하기 위해 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-과 같은 아래 설정은 주로 다양한 제조업체의 브라우저와 호환되도록 설정됩니다.
얻은 효과는 아래 그림과 같습니다.
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 중국사이트!
관련 추천:
css3와 jQuery를 사용하여 마우스에 따라 텍스트가 위아래로 흔들리는 것을 구현
css3와 jQuery를 사용하여 마우스에 따라 텍스트가 위아래로 흔들리는 것을 구현
위 내용은 CSS를 사용하여 마우스가 위로 움직일 때 아이콘 회전 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!