Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* turikk's snow effect */
- #header {
- background: transparent !important;
- }
- body {
- position: relative;
- }
- body::before {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 196px;
- background-color: #161a29;
- background-image: url(%%treebg%%);
- background-position: 50% bottom;
- z-index: -1;
- }
- .side .md > blockquote:last-of-type {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- border: none;
- background: transparent;
- margin: 0;
- padding: 0;
- overflow: hidden;
- height: 196px;
- z-index: -1;
- pointer-events: none;
- }
- .side .md > blockquote:last-of-type p {
- /* reddit doesn't support addition in calc(). Seriously. */
- width: calc(100% - -100px);
- height: 342px;
- position: absolute;
- top: -50px;
- left: -50px;
- overflow: hidden;
- margin: 0;
- padding: 0;
- font-size: 0;
- list-style: none;
- perspective: 150px;
- perspective-origin: 60% 0;
- /* Give the snow a bit of nonlinear movement in each direction. Disable this to reduce CPU usage. */
- animation: sway 15s ease 10s infinite alternate;
- }
- @keyframes sway {
- 25% {
- transform: translate(50px, 0);
- }
- 50% {
- transform: translate(-50px, -50px);
- /* We can simulate a bit more movement by adjusting the perspective origin. Disable this if its stuttering a bit too much.*/
- perspective-origin: 40% 0;
- }
- 75% {
- transform: translate(25px, 0);
- }
- 100% {
- transform: translate(-50px, 50px);
- }
- }
- .side .md > blockquote:last-of-type a {
- display: block;
- background-image: url(%%snow-hires-alt%%);
- background-size: 600px;
- opacity: .85;
- height: 2500px;
- top: -200px;
- left: -200%;
- min-width: 2400px;
- width: 600vw;
- background-repeat: repeat;
- animation: snowfall1 5s linear infinite;
- position: absolute;
- overflow: hidden;
- }
- .side .md > blockquote:last-of-type a:nth-child(1) { transform: translate3d(-600px,-600px,100px); animation-name: snowfall1;background-position: 525px 112px; } @keyframes snowfall1 { to { transform: translate3d(0,0,100px); } }
- .side .md > blockquote:last-of-type a:nth-child(2) { transform: translate3d(-600px,-600px,50px); animation-name: snowfall2;background-position: 256px 355px; } @keyframes snowfall2 { to { transform: translate3d(0,0,50px); } }
- .side .md > blockquote:last-of-type a:nth-child(3) { transform: translate3d(-600px,-600px,0px); animation-name: snowfall3;background-position: 332px 28px; } @keyframes snowfall3 { to { transform: translate3d(0,0,0px); } }
- .side .md > blockquote:last-of-type a:nth-child(4) { transform: translate3d(-600px,-600px,-50px); animation-name: snowfall4;background-position: 176px 351px; } @keyframes snowfall4 { to { transform: translate3d(0,0,-50px); } }
- .side .md > blockquote:last-of-type a:nth-child(5) { transform: translate3d(-600px,-600px,-100px); animation-name: snowfall5;background-position: 241px 433px; } @keyframes snowfall5 { to { transform: translate3d(0,0,-100px); } }
- .side .md > blockquote:last-of-type a:nth-child(6) { transform: translate3d(-600px,-600px,-150px); animation-name: snowfall6;background-position: 196px 576px; } @keyframes snowfall6 { to { transform: translate3d(0,0,-150px); } }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement