100 DAYS CSS CHALLENGE #DAY10

DAY #10

- 문제

👉 문제 바로가기

Watch: Classic, noble, modern or playful? What do you want your favorite watch to look like?

드디어 10번째 문제에 도착!! 🥳🎉

이번 문제는 간단해 보이면서도 저 움직이는 타이머 라인? 이 제일 눈에 띈다.
그리고 자세히 보면 저기 81 옆에 하트💗 도 콩닥콩닥 뛰고 있다.

---

- 내가 만든 CHALLENGE Code

- 결과물

• 1. 하얀색 점 테두리
• 2. 콩닥콩닥 하트💗
• 3. 움직이는 타이머 라인

일단 이 세가지 요소들을 제외한 다른 요소들은 어렵지 않게 배치할 수 있었다.

📝 1. 하얀색 점 테두리

원래는 border-radius: 3px dotted #fff; 하면 끝나는 작업이지만!
여기서 기본으로 제공해주는 dotted 의 점 사이 간격은 고정되어 있어 제어할 수 있는 방법이 없었다.

너무 다닥다닥 붙어있는것 같아서 이를 제어할 수 있는 다른 방법이 없나 하고 찾아본 사이트.

👉 Dashed Border Generator 바로가기

이렇게 원하는 모양으로 직접 커스텀 해서 아래에 있는 코드를 복붙하여 사용하면 된다!!
border-image 로 들어가는 듯.

저번 border-radius 로 물방울 모양💧 만들기도 그렇고 이렇게 유용한 커스텀 사이트가 생각보다 많이 있는것 같다.

📝 2. 콩닥콩닥 하트💗

1초에 한번씩 콩! 콩! 뛰는 심장을 표현하기 위해...

@keyframes heart {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

animation: heart 1s ease-in-out infinite;

이렇게 애니메이션을 만들어 사용했다!

이제 이정도는 쉽게 만들지 😎

📝 3. 움직이는 타이머 라인 ⌚

일단 저렇게 선이 그려지는? 효과를 나타내려면 svg 태그가 필요하다.

<svg class="clock_line">
  <circle cx="50%" cy="50%" r="97" stroke="#f85b5b" stroke-width="3" fill="none"/>
</svg>

그래서 이렇게 svg 안에 circle 태그를넣어 주었다.

일단 여기서 알아야 할 정보 두가지!!

✨1. stroke-dasharray✨

: 점의 길이

숫자가 작아질수록 점 사이 간격이 줄어든다.
즉, stroke-dasharray = 선 길이 일 땐 그냥 완벽한 라인이 된다.

선 길이는 2r x 원주율 이므로
circle 의 반지름(r) 을 r="97" 로 설정해 주었으니 2 x 97 x 3.14 하면 약 610 정도가 나온다.

circle {
  stroke-dasharray: 610;
}

• 

즉, 이렇게 하면 그냥 완벽한 라인 (원)이 나온다.

✨2. stroke-dashoffset✨

: 점 사이 간격의 길이

숫자가 커질수록 점 사이의 간격이 넓어진다.
반대로 숫자가 작아질수록 점 사이 간격이 좁아져 결국 선으로 보여진다.

circle {
  stroke-dasharray: 610;
  stroke-dashoffset: 610;
}

• 

이렇게 하면 선 길이 = 점사이 간격 이렇게 되어 결국 선이 보이지 않게된다!

circle {
  stroke-dasharray: 610;
  stroke-dashoffset: 0;
}

반대로 이렇게하면 그냥 stroke-dasharray: 610; 와 같다.

---

이를 이용해서 애니메이션을 만들어 보자.

circle {
  animation: timmer 5s linear infinite;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  stroke-dasharray: 610;
}

@keyframes timmer {
  0% {
    stroke-dashoffset: 610; //선 안보임
  }
  50% {
    stroke-dashoffset: 0; //선 보임
  }
  100% {
    stroke-dashoffset: -610; //선 없어짐
  }
}

애니메이션이 좀 까다로운데, 이를 이해하고 구현하는데 시간이 좀 걸렸다.

일단 선이 그려지는 기본 시작점이 우측 방향이기 때문에 90도 rotate 시켜 상단에서 시작하도록 하였다.

그리고 0 ~ 50% 로 갈때
stroke-dashoffset: 610; 선이 안보임에서 시작해
stroke-dashoffset: 0; 선 보임 까지 간다.

이렇게 되면 ✨선이 그려지는 모션✨이 나온다.

여기서 stroke-dashoffset: -610; 까지 가게하면 반대로 ✨선이 없어지는 모션✨이 나온다.

그러면 다시 없어지는 지점으로 돌아가게 되어 문제와 같은 모션이 무한 반복될 수가 있는 것이다....!! 😃...

이렇게 하면 완성 🙂

---

svg 는 참 다양한 기능을 제공하는 것 같다...

이런 다양한 모션들을 잘 만들고 싶다면 정말 많이 만들어봐야 알아 수 있겠구나 하게된 문제였당. 👍

끝