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를 안쪽에 걸면 뭔가 쓰는 장면이 있는 것 같아요.
의식하지 못하면 잊어버리는 속성이니까 가끔 써줘요.
Reference
이 문제에 관하여(box-shadow로 달을 표시합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ririli/items/91e7e2374a22ba0e9ce6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
기초적인 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를 안쪽에 걸면 뭔가 쓰는 장면이 있는 것 같아요.
의식하지 못하면 잊어버리는 속성이니까 가끔 써줘요.
Reference
이 문제에 관하여(box-shadow로 달을 표시합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ririli/items/91e7e2374a22ba0e9ce6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
