Advertisement
solielios

Custom image fall! (2) ♡

Sep 19th, 2021
4,728
2
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.72 KB | None | 2 0
  1. Description:
  2. Same as the other one, except it's only on the middle of the carrd and not covering the whole thing.
  3. How to:
  4. Step 1. Copy this code
  5. Step 2. Change the gif in the img src to your liking (I recommend using pixels to not cover your text by making your images too big).
  6. Step 3. Click save & you're done
  7.  
  8. ------
  9.  
  10. <style>
  11. /* customizable snowflake styling */
  12.  
  13. .snowflake {
  14. color: #fff;
  15. font-size: 1em;
  16. font-family: Arial, sans-serif;
  17. text-shadow: 0 0 5px #000;
  18. }
  19.  
  20. @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
  21. </style>
  22. <div class="snowflakes" aria-hidden="true">
  23. <div class="snowflake">
  24. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  25. </div>
  26. <div class="snowflake">
  27. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  28. </div>
  29. <div class="snowflake">
  30. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  31. </div>
  32. <div class="snowflake">
  33. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  34. </div>
  35. <div class="snowflake">
  36. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  37. </div>
  38. <div class="snowflake">
  39. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  40. </div>
  41. <div class="snowflake">
  42. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  43. </div>
  44. <div class="snowflake">
  45. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  46. </div>
  47. <div class="snowflake">
  48. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  49. </div>
  50. <div class="snowflake">
  51. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  52. </div>
  53. <div class="snowflake">
  54. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  55. </div>
  56. <div class="snowflake">
  57. <img src= "https://gnome.crd.co/assets/images/miscsb/f2e6efb5.gif">
  58. </div>
  59. </div>
  60.  
  61.  
  62.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement