css3: hover 효과 추가

7026 단어 css3
hover 애니메이션 효과를 바꾸기 위해 hover에transition을 추가하여 과도한 효과를 증가시킬 수 있습니다
1. 첫 번째 쓰기(이벤트 전 애니메이션 효과):
<style>
        body{ padding: 100px}
        .demo{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .demo:hover{
            -webkit-transform: scale(2);
            -moz-transform: scale(2);
            -ms-transform: scale(2);
            -o-transform: scale(2);
            transform: scale(2);
            -webkit-transition: transform 2s linear;
            -moz-transition: transform 2s linear;
            -ms-transition: transform 2s linear;
            -o-transition: transform 2s linear;
            transition: transform 2s linear;
        }
    style>
    <div class="demo">div>

이 효과는 마우스가 목표 구역으로 이동하는 호버 효과를 바꿀 수 있다. 단점: 마우스가 구역을 이동하여 이전 효과를 복원할 때 과도한 효과가 없고 딱딱하다.이 효과 개선은 방법 2(이하 참조).
2. 방법2(이벤트 전후에 애니메이션 효과가 있음)
<style>
        body{ padding: 100px}
        .demo{
            width: 100px;
            height: 100px;
            background-color: blue;
            -webkit-transition: transform 2s linear;
            -moz-transition: transform 2s linear;
            -ms-transition: transform 2s linear;
            -o-transition: transform 2s linear;
            transition: transform 2s linear;
        }
        .demo:hover{
            -webkit-transform: scale(2);
            -moz-transform: scale(2);
            -ms-transform: scale(2);
            -o-transform: scale(2);
            transform: scale(2);
        }
    style>
    <div class="demo">div>

transition을 목표 노드 css에 놓으면hover 전후에 애니메이션 효과가 있습니다.*transition은 다른 효과도 지정할 수 있고 여러 효과를 동시에 지정할 수 있다. 예를 들어 transition:width 1s;opacity : 0.5s;

좋은 웹페이지 즐겨찾기