티스토리 뷰

Dev.FrontEnd/HTML_CSS

6. hover와 transition을 활용하자

글쓰는 개발자 _Jbee 2016. 7. 6. 09:47

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;
}

cs


>>See Output>> 


예를 가장 간단하게 만들기 위해서 span tag를 사용하였다.
:hover 라는 Psuedo class가 없는 선택자, 그리고 :hover 인 선택자
둘다 transition 속성을 먹여야 마우스를 다른 곳으로 옮길 때도, 효과가 적용된다.
즉, 진입할 때와 벗어날 때 두 가지 경우 모두 효과를 줘야 더 효과적으로 보일 수 있다.

수도 클래스가 없는 선택자에서 있는 선택자로 transition 될 때,
없는 속성들을 마구마구 추가하면서 애니메이션이 발생하게 되는 것이다.
위의 예제로 말하자면, border속성, border-radius 속성, background-color 속성 등이 되겠다.
자기가 추가하고 싶은 속성들을 추가하면 된다.

속성 중 transition-timing-function은 효과가 적용되는 함수를 의미한다.



-..-


공유하기 링크
TAG
,
«   2021/09   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
Total
1,478,581
Today
424
Yesterday
490