- 4
- 260578
- 조회 수 680
눈발이 내리다가 처음 표시된 화면만큼만 나오고 잘리네요ㅠㅠ
퍼온 코드 수정한거라 구동 부분까지 자세히 알지 못하겠어요..
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | /* 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;} |
끝까지 내릴 수 있을까요?
작성자
댓글 4
2020.12.11. 21:44
신고
"YGL님의 댓글"
이 댓글을 신고 하시겠습니까?
보니까 keyframe에도 문제가 있네요.
1200px까지만 떨어지도록 만들어져 있습니다.
1200px까지만 떨어지도록 만들어져 있습니다.
2020.12.11. 21:47
신고
"YGL님의 댓글"
이 댓글을 신고 하시겠습니까?
https://codepen.io/captain323/pen/NWRbMaL
코드가 조금 지저분하지만..
직접 한번 만들어보았습니다.
css 갈아끼우시고, js 추가하시면 됩니다.
js의 stickCount rainCount로 비 양 조절하시면 되시고.. <rain>의 animation-delay, animation-duration으로 속도 등등 조절하시면 됩니다.
코드가 조금 지저분하지만..
직접 한번 만들어보았습니다.
css 갈아끼우시고, js 추가하시면 됩니다.
js의 stickCount rainCount로 비 양 조절하시면 되시고.. <rain>의 animation-delay, animation-duration으로 속도 등등 조절하시면 됩니다.
2020.12.11. 22:28
신고
"YGL님의 댓글"
이 댓글을 신고 하시겠습니까?
감사합니다!
2020.12.12. 00:06
신고
"260578님의 댓글"
이 댓글을 신고 하시겠습니까?
권한이 없습니다.
gimmepoint
merry.css:17에 .snowflakes가 position:absolute; height:100%;로 되어있고,
height가 100%로 지정된 body 바로 밑에 있어서 맨 첫 화면만큼만 엘리먼트가 떨어지는 것 같습니다.
body의 height:100% 속성을 제거하시고(또는 height:auto로 덮어씌우기), position: relative;로 지정해주시면 snowflakes가 페이지 전체를 덮도록 할 수 있습니다