마우스가 위로 움직일 때 아이콘 회전의 특수 효과를 위한 CSS 코드 공유
- 零下一度원래의
- 2017-06-19 10:25:401538검색
이 글은 주로 마우스업 아이콘 회전 효과를 구현하기 위해 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 설정입니다. 먼저 전환attribute을 img로 설정해야 합니다. 여기의 속성은 애니메이션 방법과 기간을 지정합니다. 그런 다음 마우스가 위로 움직일 때 img가 180도 회전하도록 .box를 설정합니다. hover:
transform: rotate(180deg);
-webkit-과 같은 아래 설정은 주로 다양한 제조업체의 브라우저와 호환되도록 설정됩니다.
얻은 효과는 아래 그림과 같습니다.
위 내용은 마우스가 위로 움직일 때 아이콘 회전의 특수 효과를 위한 CSS 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.