6. hover와 transition을 활용하자.
코드먼저 보겠다.
html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="scroll-icon" class="scroll-icon-down"> <span></span> </div> </body> </html> | cs |
css>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .scroll-icon-down span{ border: solid #0F0 3px; padding: 5px 20px;; transition: all 0.5s; transition-timing-function: ease; } .scroll-icon-down span:hover{ transition: all 0.5s; transition-timing-function:ease; border: solid #CFCFCF 3px; border-radius: 50%; background-color: #F00; } |
예를 가장 간단하게 만들기 위해서 span tag를 사용하였다.
:hover 라는 Psuedo class가 없는 선택자, 그리고 :hover 인 선택자
둘다 transition 속성을 먹여야 마우스를 다른 곳으로 옮길 때도, 효과가 적용된다.
즉, 진입할 때와 벗어날 때 두 가지 경우 모두 효과를 줘야 더 효과적으로 보일 수 있다.
수도 클래스가 없는 선택자에서 있는 선택자로 transition 될 때,
없는 속성들을 마구마구 추가하면서 애니메이션이 발생하게 되는 것이다.
위의 예제로 말하자면, border속성, border-radius 속성, background-color 속성 등이 되겠다.
자기가 추가하고 싶은 속성들을 추가하면 된다.
속성 중 transition-timing-function은 효과가 적용되는 함수를 의미한다.
-..-
'Dev.FrontEnd > HTML_CSS' 카테고리의 다른 글
| #반응형 웹과 적응형 웹에 대한 고찰 (3) | 2016.08.07 |
|---|---|
| 7. Material Design 이해하기 - Grid 편 (0) | 2016.07.12 |
| 5. background 속성을 알아보자 / 그럴듯한 웹페이지 만들기 (0) | 2016.07.05 |
| 4. Pseudo Class 와 Pseudo Element 활용하기 (0) | 2016.07.04 |
| [Tip] Font Awesome 활용하기! (3) | 2016.07.04 |
