호버 아래 CSS3의 효과

호버 아래 CSS3의 여러 효과 코드 공유, 마우스가 지나갈 때 CSS3의 여러 효과 모음

효과 1: 회전(회전 각도)을 수정하는 360° 회전

* {
전환:모든 0.4초 이지 인 아웃;
-webkit-transition:모든 0.4초 이지 인 아웃;
-moz-transition:모든 0.4초 이지 인 아웃 ;
-o-transition:모든 0.4초 easy-in-out;
}
*:hover {
변환:회전(360deg);
-webkit-transform:rotate(360deg );
-moz-transform:회전(360deg);
-o-transform:회전(360deg);
-ms-transform:rotate(360deg);
}

효과 2 ：스케일 확대 및 수정(확대값)
* {
전환:모두 0.4초 Ease-In-Out;
-webkit-transition:모두 0.4초 Ease-in-out;
-moz -transition:모든 0.4초 Ease-in-out;
-o-transition:모든 0.4초 Ease-in-out;
}
*:hover {
변환:scale( 1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform: scale(1.2 ; -out;
-webkit-transition:모든 0.4초 easy-in-out;

-o-transition:모두 0.4초 easy-in-out;
}

변환:rotate(360deg) scale(1.2);
-webkit-transform:rotate(360deg) scale(1.2);
- moz-transform:rotate(360deg) 축척(1.2);
-o-transform:rotate(360deg) 축척(1.2);
-ms-transform:rotate(360deg) 축척(1.2) ;
}


효과 4: 위, 아래, 왼쪽, 오른쪽으로 이동하여 수정(x축, y축)

* {
전환: 모든 0.4초 Ease-in-out;
-webkit-transition:모든 0.4초 Ease-in-out;

-o-transition :모두 0.4초 Ease-in-out;
}

변환:translate(0,-10px);
-webkit-transform:translate(0,-10px);
-moz-transform:translate(0, -10px);
          -o-transform:translate(0,-10px);
            -ms-transform:translate(0,-10px); 마우스 오버 시 효과와 관련된 내용은 PHP 중국어 홈페이지를 참고해주세요!