Advertisement
Guest User

Untitled

a guest
Dec 15th, 2016
391
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.18 KB | None | 0 0
  1. /* turikk's snow effect */
  2. #header {
  3.     background: transparent !important;
  4. }
  5.  
  6. body {
  7.     position: relative;
  8. }
  9.  
  10. body::before {
  11.     content: "";
  12.     display: block;
  13.     position: absolute;
  14.     top: 0;
  15.     left: 0;
  16.     right: 0;
  17.     height: 196px;
  18.     background-color: #161a29;
  19.     background-image: url(%%treebg%%);
  20.     background-position: 50% bottom;
  21.     z-index: -1;
  22. }
  23.  
  24. .side .md > blockquote:last-of-type {
  25.   position: absolute;
  26.   top: 0;
  27.   left: 0;
  28.   right: 0;
  29.   border: none;
  30.   background: transparent;
  31.   margin: 0;
  32.   padding: 0;
  33.   overflow: hidden;
  34.   height: 196px;
  35.   z-index: -1;
  36.   pointer-events: none;
  37. }
  38.  
  39. .side .md > blockquote:last-of-type p {
  40.   /*  reddit doesn't support addition in calc(). Seriously.  */
  41.   width: calc(100% - -100px);
  42.   height: 342px;
  43.   position: absolute;
  44.   top: -50px;
  45.   left: -50px;
  46.   overflow: hidden;
  47.   margin: 0;
  48.   padding: 0;
  49.   font-size: 0;
  50.   list-style: none;
  51.   perspective: 150px;
  52.   perspective-origin: 60% 0;
  53.  
  54. /* Give the snow a bit of nonlinear movement in each direction. Disable this to reduce CPU usage. */
  55.   animation: sway 15s ease 10s infinite alternate;
  56. }
  57.  
  58. @keyframes sway {
  59.   25% {
  60.     transform: translate(50px, 0);
  61.   }
  62.   50% {
  63.     transform: translate(-50px, -50px);
  64.     /* We can simulate a bit more movement by adjusting the perspective origin. Disable this if its stuttering a bit too much.*/
  65.     perspective-origin: 40% 0;
  66.   }
  67.   75% {
  68.     transform: translate(25px, 0);
  69.   }
  70.   100% {
  71.     transform: translate(-50px, 50px);
  72.   }
  73. }
  74.  
  75. .side .md > blockquote:last-of-type a {
  76.   display: block;
  77.   background-image: url(%%snow-hires-alt%%);
  78.   background-size: 600px;
  79.   opacity: .85;
  80.   height: 2500px;
  81.   top: -200px;
  82.   left: -200%;
  83.   min-width: 2400px;
  84.   width: 600vw;
  85.   background-repeat: repeat;
  86.   animation: snowfall1 5s linear infinite;
  87.   position: absolute;
  88.   overflow: hidden;
  89.  
  90. }
  91.  
  92. .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); } }
  93. .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); } }
  94. .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); } }
  95. .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); } }
  96. .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); } }
  97. .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