CSS를 사용하여 마우스를 위로 움직일 때 아이콘의 회전 효과를 얻는 방법에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS를 사용하여 마우스를 위로 움직일 때 아이콘의 회전 효과를 얻는 방법에 대한 자세한 설명

小云云

풀어 주다： 2017-12-19 11:17:22

원래의

2837명이 탐색했습니다.

마우스업 아이콘 회전 효과는 기업 프로젝트에서 자주 사용되는데, 특히 상단 내비게이션 바에서는 마우스업 아이콘 회전 효과를 구현하기 위한 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: