CSS는 마우스가 위로 움직일 때 아이콘을 회전시킵니다.-CSS 튜토리얼-php.cn

CSS는 마우스가 위로 움직일 때 아이콘을 회전시킵니다.

php中世界最好的语言

풀어 주다： 2018-03-21 17:18:34

원래의

2039명이 탐색했습니다.

이번에는 마우스를 위로 움직일 때 아이콘을 회전시키는 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: