마우스업 아이콘 회전 효과를 얻기 위해 CSS를 사용하는 방법에 대한 그래픽 코드에 대한 자세한 설명-CSS 튜토리얼-php.cn

마우스업 아이콘 회전 효과를 얻기 위해 CSS를 사용하는 방법에 대한 그래픽 코드에 대한 자세한 설명

黄舟

풀어 주다： 2017-06-18 13:16:58

원래의

1687명이 탐색했습니다.

이 글은 주로 마우스업 아이콘 회전 효과를 구현하기 위해 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: