메뉴 영역 애니메이션 구하기

쇼핑몰 상단의 메뉴 버튼 텍스트에 마우스를 올렸을 때, 텍스트 색깔이 변하는 애니메이션 효과를 구현해 봅시다!

 

1. index.css파일을 열어서 아래 속성값을 작성해봅시다.
2. 효과가 동작되는 과정을 볼 수 있도록,
   #intro nav ul li a { } 중괄호 안에 transition의 property와 duration 속성값을 transition: ; 형태로 추가입력합니다.

• property 속성값 : color
• duration 속성값 : 0.3s

1. #intro nav ul li a:hover { }를 입력하고, 중괄호 안에, 마우스를 올리면 바뀌고자 하는 텍스트 색깔을 color: ; 형태로 입력합니다. 색상은 #917f7f로 합니다.

 

index.css파일의 79번째줄을 바꿔줍니다.

#intro nav ul li a {

    font-size: 20px; font-weight: bold;

    transition : color 0.3s;

    color: #917f7f;

}

 

결과화면