CSS를 사용하여 마우스가 위로 움직일 때 아이콘 회전 효과를 얻는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS를 사용하여 마우스가 위로 움직일 때 아이콘 회전 효과를 얻는 방법

不言

Jun 20, 2018 pm 04:00 PM

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