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

매뉴얼 FAQ
그누보드5
데모
자료실
  • 다운로드
  • 매뉴얼
  • Q&A
    • 창작마당
  • 팁자료실
  • 스킨
  • 빌더
  • 테마
  • 플러그인
  • 사용후기
    • 영카트5
    데모
    자료실
    창작마당
    Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    국내최저! 신용카드 결제수수료 2.85%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    자사몰
    강좌
    기타
    홈페이지 배경 효과 크기 관련 문의입니다...!

    QA

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

    본문

    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 남기시면 더 자세한 도움을 받으실 수 있을 겁니다.

    답변을 작성하시기 전에 로그인 해주세요.
    전체 2,086
    QA 내용 검색
    filter #css ×

    회원로그인

    인기태그
    #그누보드5(61266) #영카트5(17115) #php(15420) #그누보드4(10639) #게시판(3229) #javascript(2660) #그누보드(2429) #css(2086) #mysql(1543) #영카트(1284) #모바일(1284) #그누커머스(1178) #html(1124) #jquery(1020) #최신글(953) #자바스크립트(946) #DB(840) #로그인(806) #이미지(773) #여분필드(766)
    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT