Advertisement
Guest User

Untitled

a guest
Jan 22nd, 2019
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.80 KB | None | 0 0
  1. ul,li,blockquote,p {
  2. margin: 0;
  3. padding: 0;
  4. border: none;
  5. list-style: none;
  6. }
  7.  
  8.  
  9.  
  10. /* Start */
  11.  
  12. .side::before,.side::after {
  13. display: none;
  14. }
  15.  
  16. .side .md > blockquote:last-of-type,
  17. .side .md > blockquote:last-of-type p,
  18. .side .md > blockquote:last-of-type [href='#snow'] {
  19. position: absolute;
  20. top: 0;
  21. bottom: 0;
  22. background-size: cover;
  23. left: 0;
  24. right: 0;
  25. pointer-events: none;
  26. }
  27. .side .md > blockquote:last-of-type p {
  28. overflow: hidden;
  29. left: -100px;
  30. right: -100px;
  31. perspective: 100px;
  32. margin: 0;
  33. }
  34. .side .md > blockquote:last-of-type [href='#snow'] {
  35. display: block;
  36. height: 8000px;
  37. background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/299775/snow-sparse.png);
  38. animation: s 10s linear infinite;
  39. background-size: auto;
  40. }
  41. .side .md > blockquote:last-of-type p:nth-of-type(1),
  42. .side .md > blockquote:last-of-type p:nth-of-type(2),
  43. .side .md > blockquote:last-of-type p:nth-of-type(4),
  44. .side .md > blockquote:last-of-type p:nth-of-type(6) {
  45. animation: sw 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
  46. transform: translateX(-50px);
  47. }
  48. .side .md > blockquote:last-of-type p:nth-of-type(1) a,
  49. .side .md > blockquote:last-of-type p:nth-of-type(2) a {
  50. background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/299775/snow-dense.png);
  51. animation-duration: 25s;
  52. }
  53. .side .md > blockquote:last-of-type p:nth-of-type(1) {
  54. animation-duration: 35s;
  55. }
  56. .side .md > blockquote:last-of-type p:nth-of-type(1) a {
  57. background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/299775/snow-verydense-blur.png);
  58. transform: translateZ(-25px);
  59. animation-name: sF;
  60. width: 4000px;
  61. top: -500px;
  62. left: -2000px;
  63. }
  64. .side .md > blockquote:last-of-type a:nth-child(2) {
  65. animation-duration: 10s;
  66. background-size: 250px;
  67. }
  68. .side .md > blockquote:last-of-type a:nth-child(3) {
  69. animation-duration: 20s;
  70. background-size: 500px;
  71. }
  72. .side .md > blockquote:last-of-type p:nth-of-type(6) a {
  73. animation-duration: 5s;
  74. transform: translateZ(75px);
  75. animation-name: sC;
  76. }
  77. @keyframes s {
  78. 0% {
  79. transform: translateY(-2000px);
  80. }
  81. }
  82. @keyframes sC {
  83. 0% {
  84. transform: translateY(-2000px) translateZ(75px);
  85. }
  86. }
  87. @keyframes sF {
  88. 0% {
  89. transform: translateY(-2000px) translateZ(-25px);
  90. }
  91. }
  92. @keyframes sw {
  93. to {
  94. transform: translateX(50px);
  95. }
  96. }
  97.  
  98.  
  99.  
  100. #####################################
  101.  
  102. <div class="side">
  103. <div class="md">
  104. <blockquote>
  105. <p>
  106. <a href="#snow"></a>
  107. </p>
  108. <p>
  109. <a href="#snow"></a>
  110. </p>
  111. <p>
  112. <a href="#snow"></a>
  113. <a href="#snow"></a>
  114. <a href="#snow"></a>
  115. </p>
  116. <p>
  117. <a href="#snow"></a>
  118. </p>
  119. </blockquote>
  120. </div>
  121. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement