• 목록
  • 아래로
  • 위로
  • 4
  • Estrella3
  • 조회 수 89

https://fnbase.xyz/snow.html

FNBase - 슬로건 없음..

눈발이 내리다가 처음 표시된 화면만큼만 나오고 잘리네요ㅠㅠ

퍼온 코드 수정한거라 구동 부분까지 자세히 알지 못하겠어요..

/* Css Snow */
.snowflakes {
width: 100%; height: 100%;
position: absolute; top: 10; left: 0;
    overflow: hidden !important;
}

i-i, i-i:after, i-i:before { background: white; }
i-i {
display: inline-block;
    animation: snowflakes 3s linear 2s 20;
position: relative;
}
i-i:after, i-i:before {
height: 100%;
width: 100%;
content: ".";
position: absolute;
top: 0px;
left: 0px;
transform: rotate(120deg);
}
i-i:before { transform: rotate(240deg); }

@keyframes snowflakes {
0% {
-webkit-transform: translate3d(0,0,0) rotate(0deg) scale(0.6);
}
100% {
-webkit-transform: translate3d(15px, 1200px, 0px) rotate(360deg) scale(0.6);
};
}

.snowflakes i-i:nth-child(3n) {
width: 16px; height: 4px;
animation-duration: 4s;
animation-iteration-count: 30;
transform-origin: right -45px;
}

.snowflakes i-i:nth-child(3n+1) {
width: 24px; height: 6px;
animation-duration: 6s;
animation-iteration-count: 45;
transform-origin: right -30px;
}

.snowflakes i-i:nth-child(3n+2) {
width: 32px; height: 8px;
animation-duration: 8s;
animation-iteration-count: 60;
transform-origin: right -15px;
}

/* different delays so they don't all start at the same time */
.snowflakes i-i:nth-child(7n) {
  opacity:.3;
  animation-delay: 0s;
  animation-timing-function:ease-in;
}
.snowflakes i-i:nth-child(7n+1) {
  opacity:.4;
  animation-delay: 1s;
  animation-timing-function:ease-out;
}
.snowflakes i-i:nth-child(7n+2) {
  opacity:.5;
  animation-delay: 1.5s;
  animation-timing-function:linear;
}
.snowflakes i-i:nth-child(7n+3) {
  opacity:.6;
  animation-delay: 2s;
  animation-timing-function:ease-in;
}
.snowflakes i-i:nth-child(7n+4) {
  opacity:.7;
  animation-delay: 2.5s;
  animation-timing-function:linear;
}
.snowflakes i-i:nth-child(7n+5) {
  opacity:.8;
  animation-delay: 3s;
  animation-timing-function:ease-out;
}
.snowflakes i-i:nth-child(7n+6) {
  opacity:.9;
  animation-delay: 3.5s;
  animation-timing-function:ease-in;
}
/* from https://codepen.io/iautomation/pen/VYexBz by Estrella3 */

끝까지 내릴 수 있을까요?

작성자
Estrella3 53 Lv. (0%) 224790/233280EXP

반가워요!

댓글 4

YGL
음.. 눈이 침침해서 그런지 눈발이 내리는 것은 확인하지 못했으나.. 개발자도구로 보니 뭐가 떨어지긴 하네요

merry.css:17에 .snowflakes가 position:absolute; height:100%;로 되어있고,
height가 100%로 지정된 body 바로 밑에 있어서 맨 첫 화면만큼만 엘리먼트가 떨어지는 것 같습니다.

body의 height:100% 속성을 제거하시고(또는 height:auto로 덮어씌우기), position: relative;로 지정해주시면 snowflakes가 페이지 전체를 덮도록 할 수 있습니다
comment menu
2020.12.11. 21:44

신고

"YGL님의 댓글"

이 댓글을 신고 하시겠습니까?

YGL → YGL
보니까 keyframe에도 문제가 있네요.
1200px까지만 떨어지도록 만들어져 있습니다.
comment menu
2020.12.11. 21:47

신고

"YGL님의 댓글"

이 댓글을 신고 하시겠습니까?

YGL → YGL
https://codepen.io/captain323/pen/NWRbMaL

코드가 조금 지저분하지만..
직접 한번 만들어보았습니다.

css 갈아끼우시고, js 추가하시면 됩니다.

js의 stickCount rainCount로 비 양 조절하시면 되시고.. <rain>의 animation-delay, animation-duration으로 속도 등등 조절하시면 됩니다.
comment menu
2020.12.11. 22:28

신고

"YGL님의 댓글"

이 댓글을 신고 하시겠습니까?

Estrella3 작성자 → YGL
profile image
감사합니다!
comment menu
2020.12.12. 00:06

신고

"Estrella3님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 시스템 업데이트 안내 4 마스터 21.04.12.01:55 166
공지 소셜로그인이 불가능 합니다. 3 마스터 21.01.02.14:14 457
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 3854
826 서버 초심자가 쓰기에 어떤 OS가 나을까요? 12 제르엘 20.12.11.23:00 242
825 사이트 들어가려는데 오류 2 image title: 인스타그램wikiowner 20.12.09.19:09 87
824 Set up the wiki 18 title: 인스타그램Whitetiger0423 20.12.07.10:37 409
823 홈페이지 디자인을 바꾼 후부터 게시판 스킨 적용이 이상하게 됩니다 image 손가락개 20.12.04.02:56 52
822 혹시 FTP 접속 잘 되시나요?? 2 원미 20.12.01.21:51 84
821 카페대문 만들기 힘드네요 .. 공구테라스 20.11.26.16:24 70
820 php 관련해서 질문 좀 여쭙겠습니다 image title: 대한민국 국기gimmepoint 20.11.23.20:50 98
[CSS] 애니메이션 관련 4 Estrella3 20.11.21.23:24 89
818 요즘 코로나 백신 소식이 자주나오는데 내년에는 괜찮을까요? 3 필우 20.11.13.10:41 55
817 ftp web파일 1 title: 인스타그램wikiowner 20.11.11.22:16 43
816 중고 모니터 액정이 나갔는데 수리하는게 나을까요? 새로 사는게 나을까요? 10 필우 20.11.11.10:47 92
815 폴더 권한 관련 질문 드립니다. 5 image 이니스프리 20.11.08.14:47 79
814 맵네임을 누르면 다른 사이트의 게시판을 나오게 하고싶은데 어떻게 해야하나요? 1 손가락개 20.11.08.01:01 45
813 위키 설치 하실줄 아시는분,,,, 2 title: 인스타그램wikiowner 20.11.06.20:30 125
812 FTP 연결 안됌.... 2 image title: 인스타그램wikiowner 20.11.06.19:18 64
811 도메인 싸거나 공짜로 파는 곳 어디 있을까요 6 출사로 20.11.06.07:22 172
810 위키 호스팅에 대해 궁금점 9 title: 인스타그램wikiowner 20.11.04.15:05 118
809 사이트 정보 등록 3 citen 20.10.29.17:36 68
808 키보드 트레이 추천을 부탁드려요 ^^ 3 이니스프리 20.10.29.00:05 105
807 재질문) php 오류페이지 관련 질문입니다 2 Ruwaku 20.10.13.20:54 98