coding tips and tricks part 2: floating snowflakes gifs

hello hello, its been a while but i have a new installment in coding tips and tricks! today im gonna show you how to make floating gifs scatter across your profile. now i am by no means an expert on coding and this is not a course for peeps who have been doing this for a long time. this is more for those here still new to coding and wanting to spice their profiles up. i recommend doing all of this on pc vs mobile as mobile is gonna be much more difficult for you. 

your base code will look something like this

<div class="snowflakes">

  <div class="snowflake">

   <img src="*imagelinkhere*"/>

  </div>

  <div class="snowflake">

  <img src="*imagelinkhere*"/>

  </div>

  <div class="snowflake">

  <img src="*imagelinkhere*"/>

  </div>

  <div class="snowflake">

  <img src="*imagelinkhere*"/>

  </div>

  <div class="snowflake">

  <img src="*imagelinkhere*"/>

</div>

<style>

/* customizable snowflake styling */

.snowflake {

  color: #27cff5;

  font-size: 2em;

  font-family: Arial, sans-serif;

  text-shadow: 0 0 0px rgba(0,0,0,0.7);

}

@-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}

</style>

now this section here 

<div class="snowflakes">

  <div class="snowflake">

   <img src="*imagelinkhere*"/>

  </div>

you can change *snowflake* or *snowflakes* to whatever you want to change the title too, just know all of them will have that title and so will .snowflake {. this is so that .snowflake knows what to pull from and read.

under your webkit, you can customize your animation speed and where they come from as well. you can quite literally, add as many div class's that you want with different images. (just dont overload your desktop pls) 

if you have any questions, pls comment and let me know!