[SCSS] 마우스 오버 시 채워지는 테두리 애니메이션 효과

by

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.hoverBtn {
      $borderWid: 2px;
      $btnBakColor: #23193b;
 
      position: relative;
      overflow: hidden;     
      background-color: $btnBakColor;
 
      &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-width: $borderWid;
            border-style: solid;
            border-color: white;
            box-sizing: border-box;
      }
 
      &:after {
            content: "";
            position: absolute;
            top: calc(-1 * #{$borderWid});
            left: calc(-1 * #{$borderWid});
            bottom: calc(-1 * #{$borderWid});
            right: calc(-1 * #{$borderWid});
            display: inline-block;
            background: radial-gradient(transparent 60%, $btnBakColor 40%);
            clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%);
            transition: all .2s ease-in-out;
      }
 
      &:hover {
            &:after {
                  clip-path: polygon(90% 0, 100% 0, 100% 10%, 10% 100%, 0 100%, 0 90%);
            }
      }
}

개발하는 프로젝트에서 디자이너가 요청해서 만들게 되었는데,

추가로 생기는 요소나 CSS 라인을 최소화 해야 했다.

그래서 온라인에 나도는 팁들을 쓰지 않고 약간 치트성? 으로 만들었다.

  • before로 테두리 만들기
  • after로 일단 덮고
  • 가운데는 보이게 하기 위해 배경색을 gradient로 채움
  • 그리고 clip-path로 잘라내고
  • 마우스 오버시 애니메이션 효과를 주기 위해 clip-path 사이즈 조절

Leave a Comment