디자인 작업을 마쳤다면 이번에는 transition 속성을 사용하여 마우스 포인터를 올렸을 때 메뉴 버튼이 오른쪽으로 움직이면서 배경색이 바뀌는 효과를 적용하겠습니다.

     

    li {
        width: 250px;
        background-color: #000;
        padding: 20px;
        border-top: solid 5px #dfdfdf;
        transition: background-color 0.2s, margin-left 0.5s;
    }
    
    li:hover{
        background-color: gray;
        margin-left: 10px;
    }

     

    그림 11-10 HOME 메뉴에 마우스 포인터를 올리면 배경색이 회색으로 바뀌고 오른쪽으로 10px 움직인다

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.