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

최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타
    매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
    홈페이지 배경 효과 크기 관련 문의입니다...!

    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,090
    QA 내용 검색
    filter #css ×

    회원로그인

    인기태그
    #그누보드5(61408) #영카트5(17137) #php(15440) #그누보드4(10639) #게시판(3237) #javascript(2664) #그누보드(2433) #css(2090) #mysql(1544) #영카트(1284) #모바일(1284) #그누커머스(1178) #html(1125) #jquery(1021) #최신글(956) #자바스크립트(947) #DB(841) #로그인(806) #이미지(774) #여분필드(767)
    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT