홈페이지 배경 효과 크기 관련 문의입니다...!

홈페이지 배경 효과 크기 관련 문의입니다...!

QA

홈페이지 배경 효과 크기 관련 문의입니다...!

답변 4

본문

https://codepen.io/YusukeNakaya/pen/XyOaBj

해당 소스를 홈페이지 배경 효과로 사용하고 싶은데, 어찌저찌 변환해서 배경으로 출력하는 부분까지는 성공했으나... 화면에 꽉 차게는 나오지 않고 딱 코드펜 화면상의 크기로만 출력됩니다...ㅠㅠ! 어디를 손보는게 좋을까요...?

#css

이 질문에 댓글 쓰기 :

답변 4

배르만 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

221.♡.♡.6

SCSS


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; */
$shooting-time: 6000ms;
.night {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateZ(45deg);
  // animation: sky 200000ms linear infinite;
}
.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;
  }
  &::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);
  }
  
   $i from 1 through 20 {
    &:nth-child(#{$i}) {
      $delay: random(9999) + 0ms;
      /*
      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});
      animation-delay: $delay;
      // opacity: random(50) / 100 + 0.5;
      
      &::before,
      &::after {
        animation-delay: $delay;
      }
    }
  }
}
@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(45 + 360deg);
  }
}

 

result sample


<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>
<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>

웅프 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

114.♡.♡.193

본소스는 각종 효과 변화 필터 기능을 위한 소스 이므로 실제 웹에서 원한는 크기를 설정값을 적용받기 위해서는 사용자 페이지에서 간단하게 호출 해야합니다.

 

https://www.haenong.kr/

css 정의 되셨다면

<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>

이것을 헤드파일 상단 시작 위에 다 넣으시면됩니다.

그리고 css에서

  top: calc(var(--shooting-start-x) + 48vh);
  left: calc(var(--shooting-start-y) + 63vw);

각각 x y 시작좌표값를 적절하게 설정하시구요 화면 벗어나지않는 좌표로 하시면됩니다.

 

균이 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

175.♡.♡.119

어렵게 생각할 것 없이 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 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

116.♡.♡.76

[화면에 꽉 차게는 나오지 않고 딱 코드펜 화면상의 크기로만]
이 표현이 정확히 뭘 의미하는지....
검은 밤하늘 배경이 다 안 찬다는 뜻인가요?

아니면 유성이 정가운데 부분에서만 내린다는 의미인가요?

해당 코드 적용된 페이지 URL 남기시면 더 자세한 도움을 받으실 수 있을 겁니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #css ×
전체 2,086
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로