문의 - Inflearn | Community Q&A

HTML+CSS+JS Portfolio Practical Publishing (Season 1)

Creating Practical Examples Using CSS Keyframe Animation 01 (Circular Size Change Loading Animation)

문의

Written on

438

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title> 도형 로딩 애니메이션-01 </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="loading">
      <span></span>
      <span></span>
      <span></span>
  </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');

body {
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 1.5em;
  margin: 0;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

a {
  text-decoration: none;
}

.loading {}

.loading span {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: gray;
  background-repeat: 50%;
}

.loading span:nth-child(1) {}
.loading span:nth-child(2) {}
.loading span:nth-child(3) {}

@keyframes loading {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  50% {
    opacity: 0;
    transform: scale(1.2);
  }

  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

도형 자체가 만들어지지 않는데 뭐가 문제일까요?

VS CODE 사용중입니다.

HTML/CSSjquery

Answer 2

codingworks

Instructor

다시 올리신 코드로 하시면 정상적으로 잘 나옵니다.
올리신 코드 복사해서 방금 해봤어요. 아래처럼 잘 나옵니다.
왜 안나온다고 하시는지 모르겠네요. 정상적으로 잘 하셨는데요.

codingworks

Instructor

보더레디어스를 줘야 하는데 다른 속성을 쓰셨어요.

wjsdudqls1235866

Questioner

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');

body {
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 1.5em;
  margin: 0;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

a {
  text-decoration: none;
}

.loading {}

.loading span {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: gray;
  border-radius: 50%;
}

.loading span:nth-child(1) {}
.loading span:nth-child(2) {}
.loading span:nth-child(3) {}

@keyframes loading {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  50% {
    opacity: 0;
    transform: scale(1.2);
  }

  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

wjsdudqls1235866

Questioner

수정 이후에도 변화가 없네요..ㅠㅠ

wjsdudqls1235866

Questioner

해당 강의의 예제 완성본 파일 자료에서도 도형이 나타나지 않습니다.

혹시 다른 문제가 있을까요??

Inflearn Community Q&A

문의