box-shadow로 달을 표시합니다.

6057 단어 box-shadowCSS

최종 제공 서비스


이거다.
그래.
이것은 box-shadow 속성에서 실현할 수 있습니다.

실시


기초적인 html 준비.


씩씩하고 늠름한 자태.
moon.html
<!DOCTYPE html>
<html lang ="ja">
<head>
    <link rel="stylesheet" href="../css/moon.css">
</head>
<body>
    <main class="stage">
        <div class="moon"></div>
    </main>
</body>
</html>

CSS


이쪽도 시원해요.
해설은 뒤에 있다.
스테이지는 배경일 뿐이니 그렇게 신경 쓰지 마세요.
moon.css
/**
* stage
*/
.stage {
  position: absolute;
  width: 100%; height: 100%;
  background-color: rgb(228, 217, 210);
  display: flex;
  justify-content: center;
  align-items: center;
}
.stage:before,
.stage:after { position: absolute; content: ""; display: block; }
.stage:before {
  top: 20px; left: 20px;
  width: calc(100% - 40px); height: calc(100% - 40px);
  border: solid 5px #6e5c60;
  border-radius: 30px;
  box-sizing: border-box;
  opacity: 0.3;
}

/**
* moon
*/

.moon {
  width: 500px;
  height: 500px;
  border-radius: 100%;
  animation: anime 5s linear infinite;
}

@keyframes anime{
  from{
    box-shadow: none;
  }
  to{
    box-shadow: 500px -200px 0 0 rgb(254, 228, 137) inset;
  }
}

살짝 설명해주세요.


실제 인상과 반대로 노란색의 밝은 부분은box-shadow로 표현된 부분이다.
keyframes에서 정의한 바와 같이 음영이 없는 상태에서 음영이 있는 상태로 애니메이션합니다.
원형에 다른 대상을 겹치면 어떻게든 선형의 변화가 되기 때문에 자신에게 음영을 주어 바뀐다.
물론 바깥쪽에 그림자를 붙여도 달이 되지 않기 때문에 안쪽으로 변화하기 위해 inset을 box-shadow에 넣는 것을 잊지 마세요.

총결산


box-shadow를 안쪽에 걸면 뭔가 쓰는 장면이 있는 것 같아요.
의식하지 못하면 잊어버리는 속성이니까 가끔 써줘요.

좋은 웹페이지 즐겨찾기