홈페이지 배경 효과 크기 관련 문의입니다...! 채택완료
보삼보숭이
2년 전
조회 3,621
https://codepen.io/YusukeNakaya/pen/XyOaBj
해당 소스를 홈페이지 배경 효과로 사용하고 싶은데, 어찌저찌 변환해서 배경으로 출력하는 부분까지는 성공했으나... 화면에 꽉 차게는 나오지 않고 딱 코드펜 화면상의 크기로만 출력됩니다...ㅠㅠ! 어디를 손보는게 좋을까요...?
댓글을 작성하려면 로그인이 필요합니다.
답변 4개
채택된 답변
+20 포인트
2년 전
SCSS
</p>
<p>html { width: 100%; height: 100%; }</p>
<p>body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
height: 100vh;
overflow: hidden;
display: flex;
font-family: 'Anton', sans-serif;
justify-content: center;
align-items: center;
}</p>
<p>:root {
/*
--shooting-start-x: 50%;
--shooting-start-y: 50%;
*/
--shooting-start-x: 0%;
--shooting-start-y: 0%;
}
/* $shooting-time: 3000ms; */
$shooting-time: 6000ms;</p>
<p>.night {
position: relative;
width: 100%;
height: 100%;
transform: rotateZ(45deg);
// animation: sky 200000ms linear infinite;
}</p>
<p>.shooting_star {
position: absolute;
left: 50%;
top: 50%;
// width: 100px;
height: 2px;
background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
border-radius: 999px;
filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
animation:
tail $shooting-time ease-in-out infinite,
shooting $shooting-time ease-in-out infinite;
&::before {
content: '';
position: absolute;
top: calc(50% - 1px);
right: 0;
// width: 30px;
height: 2px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
animation: shining $shooting-time ease-in-out infinite;
}</p>
<p> &::after {
// CodePen Error
// @extend .shooting_star::before;
content: '';
position: absolute;
top: calc(50% - 1px);
right: 0;
// width: 30px;
height: 2px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
animation: shining $shooting-time ease-in-out infinite;
transform: translateX(50%) rotateZ(-45deg);
}
@for $i from 1 through 20 {
&:nth-child(#{$i}) {
$delay: random(9999) + 0ms;</p>
<p> /*
top: calc(50% - #{random(400) - 200px});
left: calc(50% - #{random(300) + 0px});
*/
top: calc(var(--shooting-start-x) + #{random(100) + 0vh});
left: calc(var(--shooting-start-y) + #{random(100) + 0vw});</p>
<p> animation-delay: $delay;
// opacity: random(50) / 100 + 0.5;
&::before,
&::after {
animation-delay: $delay;
}
}
}
}</p>
<p>@keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}</p>
<p>@keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}</p>
<p>@keyframes shooting {
0% {
transform: translateX(0);
}
100% {
/* transform: translateX(300px); */
transform: translateX(50vw);
}
}</p>
<p>@keyframes sky {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(45 + 360deg);
}
}</p>
<p>
result sample
</p>
<p><style>
html {
width: 100%;
height: 100%;
}
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
height: 100vh;
overflow: hidden;
display: flex;
font-family: 'Anton', sans-serif;
justify-content: center;
align-items: center;
}
:root {
/* --shooting-start-x: 50%;
--shooting-start-y: 50%;
*/
--shooting-start-x: 0%;
--shooting-start-y: 0%;
}
/* $shooting-time: 3000ms;
*/
.night {
position: relative;
width: 100%;
height: 100%;
transform: rotateZ(45deg);
}
.shooting_star {
position: absolute;
left: 50%;
top: 50%;
height: 2px;
background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
border-radius: 999px;
filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
animation: tail 6000ms ease-in-out infinite, shooting 6000ms ease-in-out infinite;
}
.shooting_star::before {
content: '';
position: absolute;
top: calc(50% - 1px);
right: 0;
height: 2px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
animation: shining 6000ms ease-in-out infinite;
}
.shooting_star::after {
content: '';
position: absolute;
top: calc(50% - 1px);
right: 0;
height: 2px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
animation: shining 6000ms ease-in-out infinite;
transform: translateX(50%) rotateZ(-45deg);
}
.shooting_star:nth-child(1) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 61vh);
left: calc(var(--shooting-start-y) + 31vw);
animation-delay: 7149ms;
}
.shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after {
animation-delay: 7149ms;
}
.shooting_star:nth-child(2) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 98vh);
left: calc(var(--shooting-start-y) + 3vw);
animation-delay: 9910ms;
}
.shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after {
animation-delay: 9910ms;
}
.shooting_star:nth-child(3) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 89vh);
left: calc(var(--shooting-start-y) + 42vw);
animation-delay: 4999ms;
}
.shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after {
animation-delay: 4999ms;
}
.shooting_star:nth-child(4) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 32vh);
left: calc(var(--shooting-start-y) + 23vw);
animation-delay: 761ms;
}
.shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after {
animation-delay: 761ms;
}
.shooting_star:nth-child(5) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 10vh);
left: calc(var(--shooting-start-y) + 66vw);
animation-delay: 6020ms;
}
.shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after {
animation-delay: 6020ms;
}
.shooting_star:nth-child(6) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 48vh);
left: calc(var(--shooting-start-y) + 49vw);
animation-delay: 803ms;
}
.shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after {
animation-delay: 803ms;
}
.shooting_star:nth-child(7) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 64vh);
left: calc(var(--shooting-start-y) + 61vw);
animation-delay: 2529ms;
}
.shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after {
animation-delay: 2529ms;
}
.shooting_star:nth-child(8) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 10vh);
left: calc(var(--shooting-start-y) + 10vw);
animation-delay: 8105ms;
}
.shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after {
animation-delay: 8105ms;
}
.shooting_star:nth-child(9) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 59vh);
left: calc(var(--shooting-start-y) + 11vw);
animation-delay: 8983ms;
}
.shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after {
animation-delay: 8983ms;
}
.shooting_star:nth-child(10) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 65vh);
left: calc(var(--shooting-start-y) + 54vw);
animation-delay: 2126ms;
}
.shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after {
animation-delay: 2126ms;
}
.shooting_star:nth-child(11) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 39vh);
left: calc(var(--shooting-start-y) + 12vw);
animation-delay: 1027ms;
}
.shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after {
animation-delay: 1027ms;
}
.shooting_star:nth-child(12) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 6vh);
left: calc(var(--shooting-start-y) + 69vw);
animation-delay: 8ms;
}
.shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after {
animation-delay: 8ms;
}
.shooting_star:nth-child(13) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 59vh);
left: calc(var(--shooting-start-y) + 91vw);
animation-delay: 9201ms;
}
.shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after {
animation-delay: 9201ms;
}
.shooting_star:nth-child(14) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 96vh);
left: calc(var(--shooting-start-y) + 32vw);
animation-delay: 5892ms;
}
.shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after {
animation-delay: 5892ms;
}
.shooting_star:nth-child(15) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 58vh);
left: calc(var(--shooting-start-y) + 16vw);
animation-delay: 2127ms;
}
.shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after {
animation-delay: 2127ms;
}
.shooting_star:nth-child(16) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 45vh);
left: calc(var(--shooting-start-y) + 1vw);
animation-delay: 2424ms;
}
.shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after {
animation-delay: 2424ms;
}
.shooting_star:nth-child(17) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 16vh);
left: calc(var(--shooting-start-y) + 9vw);
animation-delay: 8157ms;
}
.shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after {
animation-delay: 8157ms;
}
.shooting_star:nth-child(18) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 81vh);
left: calc(var(--shooting-start-y) + 96vw);
animation-delay: 5988ms;
}
.shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after {
animation-delay: 5988ms;
}
.shooting_star:nth-child(19) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 33vh);
left: calc(var(--shooting-start-y) + 99vw);
animation-delay: 3460ms;
}
.shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after {
animation-delay: 3460ms;
}
.shooting_star:nth-child(20) {
/* top: calc(50% - #{
random(400) - 200px
}
);
left: calc(50% - #{
random(300) + 0px
}
);
*/
top: calc(var(--shooting-start-x) + 1vh);
left: calc(var(--shooting-start-y) + 6vw);
animation-delay: 9730ms;
}
.shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after {
animation-delay: 9730ms;
}
@keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}
@keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
@keyframes shooting {
0% {
transform: translateX(0);
}
100% {
/* transform: translateX(300px);
*/
transform: translateX(50vw);
}
}
@keyframes sky {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(405deg);
}
}
</style></p>
<p><div class="night">
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
</div></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
보삼보숭이
2년 전
해당 코드 사용하여 무사히 적용 완료했습니다 ㅠ_ㅠ! 너무너무 감사드립니다...!
댓글을 작성하려면 로그인이 필요합니다.
2년 전
어렵게 생각할 것 없이 top, left 값을 여러 가지로 바꾸어보세요
.shooting_star:nth-child(1) { top: calc(50% - 79px); left: calc(10% - 156px);
~~child(1) ~child(3) 꺼지 50% , 10%
.shooting_star:nth-child(4) { top: calc(10% - -179px); left: calc(50% - 4px);
~~~child(4) ~ child(7) 까지 10%, 50%
.shooting_star:nth-child(11) { top: calc(50% - 96px); left: calc(80% - 109px);
위와 같이 위치 퍼센트 값을 여러가지로 바꾸세요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
sinbi
Expert
2년 전
[화면에 꽉 차게는 나오지 않고 딱 코드펜 화면상의 크기로만] 이 표현이 정확히 뭘 의미하는지.... 검은 밤하늘 배경이 다 안 찬다는 뜻인가요?
아니면 유성이 정가운데 부분에서만 내린다는 의미인가요?
해당 코드 적용된 페이지 URL 남기시면 더 자세한 도움을 받으실 수 있을 겁니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
본소스는 각종 효과 변화 필터 기능을 위한 소스 이므로 실제 웹에서 원한는 크기를 설정값을 적용받기 위해서는 사용자 페이지에서 간단하게 호출 해야합니다.
css 정의 되셨다면
이것을 헤드파일 상단 시작 위에 다 넣으시면됩니다.
그리고 css에서
top: calc(var(--shooting-start-x) + 48vh); left: calc(var(--shooting-start-y) + 63vw);
각각 x y 시작좌표값를 적절하게 설정하시구요 화면 벗어나지않는 좌표로 하시면됩니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인