집 >웹 프론트엔드 >CSS 튜토리얼 >CSS는 마우스가 위로 움직일 때 아이콘을 회전시킵니다.

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

php中世界最好的语言원래의: 2018-03-21 17:18:342066검색

이번에는 마우스를 위로 움직일 때 아이콘을 회전시키는 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-과 같은 설정은 주로 다양한 제조업체의 브라우저와 호환되도록 설정됩니다.

얻은 효과는 아래 그림에 나와 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어의 다른 관련 기사에 주목하세요. 웹사이트!