• 목록
  • 아래로
  • 위로
  • 4
  • 260578
  • 조회 수 116

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

끝까지 내릴 수 있을까요?

작성자
260578 58 Lv. (58%) 274630/278480EXP

반가워요!

댓글 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님의 댓글"

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

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

신고

"260578님의 댓글"

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

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 684
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 4363
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4475
925 계속 사용중이던 네트워크 공유 폴더가 갑자기 액세스 불가라고 뜹니다. 6 image 장윤서 18.06.07.16:55 34339
924 팀뷰어 대체할 원격 제어 프로그램 추천 부탁드립니다 16 이니스프리 17.11.30.15:38 32326
923 엑셀 그래프의 축 간격 조절 문제입니다. 2 image 국내산라이츄 17.08.10.11:06 12494
922 아이폰/아이패드 충전기 발열 관련 질문 드립니다 9 image 이니스프리 19.05.02.22:52 11111
921 에러 523 해결법 4 입체그림 20.02.21.16:48 6703
920 PyQt 실행시 프리징 현상 관련하여 질문 드립니다! ㅠㅠ 3 이니스프리 19.07.06.03:37 6703
919 프린터가 지 맘대로 프린트를 하네요. 3 곰도리푸 18.04.04.18:20 6056
918 윈도우용 메일 클라이언트가 필요합니다. 9 네모 18.01.11.20:15 5867
917 크롬에서 특정 사이트 접속 문제 관련하여 질문 드립니다 9 이니스프리 17.03.27.18:03 5325
916 오라클 클라우드 프리티어 가입이 안 되네요 ㅠㅠ 20 이니스프리 20.06.26.21:31 4840
915 파이썬 에디터로 어떤 것이 좋나요? 14 NoYeah 20.01.08.21:08 4532
914 라떼판다와 라즈베리 파이 중 어느 쪽을 사는 게 나을까요? 9 제르엘 18.10.14.19:25 3835
913 나무 위키의 수익구조는 무엇일까요? 2 NoYeah 18.03.18.15:56 3834
912 파티션 복구 프로그램 TestDisk 잘 아시는 분 계시나요? 29 이니스프리 17.11.10.14:53 3747
911 IE11에서 이미지가 깨지는 현상을 해결할 수 있을까요? 2 이니스프리 19.08.02.00:01 3704
910 파일질라로 연결하니까 보안되지 않은 서버입니다. TLS를 통한 FTP를 지원하지 않습니다. 이렇게떠요 해결방안좀 1 마카오 16.09.11.00:57 3657
909 자바스크립트 FormData와 관련된 메서드의 IE 호환성과 관련하여 질문 드립니다 ^^ 6 image 이니스프리 19.08.05.14:22 3432
908 선택약정 안 되는 중고폰의 경우에는 어떤 단점이 있는 것인가요?? 6 이니스프리 20.01.21.14:30 3103
907 집에서 시놀로지 NAS로 워드프레스나 미디어위키 돌리면 느릴까요? 10 이니스프리 17.01.16.20:56 2981
906 [Requests] multipart/form-data의 전송에 대해 질문 드립니다 ^^ 4 이니스프리 19.12.18.22:00 2978