Twilight Sparkle's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

code to add snowflakes to your profile!!!

just copy and paste this somewhere i stole it from the actual html on the site so you dont need to credit me i just put it here for ease of access... 

<div class="snowflakes" aria-hidden="true">
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
</div>
<style>
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px 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>
❅
❆
❅
❆
❅
❆
❅
❆
❅
❆
❅
❆


52 Kudos

—

Comments

Displaying 15 of 15 comments ( View all | Add Comment )

Squeezynutz

 Squeezynutz's profile picture

This is amazing! Thank you so much :333


Report Comment

⟡Ziggy

 ⟡Ziggy's profile picture

Thanks


Report Comment

Typical

 Typical's profile picture

Can this be used for different images too?


Report Comment



yes it can

example (the images are large here, still working on that but id recommend smaller images, about 42 x 42)














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

by Uneuclid; ; Report

Thankss

by ⟡Ziggy; ; Report

jojo

 jojo's profile picture

thank you so much i literally love you


Report Comment

portwindsor

 portwindsor's profile picture

thank you so much


Report Comment

</SHALLOWBONES>

 </SHALLOWBONES>'s profile picture

if i wished to add a png? how do i exactly do that with a link i mean


Report Comment



you can just replace the snowflakes with img src=(url)

by psyclone; ; Report

I don't get it could i get a example

by ✰ 𝕸𝖆𝖗𝖌𝖊 ✰; ; Report

Jese <3

 Jese <3's profile picture

i wanna add my own picture but when i do its really big, how do i fix the sizing


Report Comment



https://www.adobe.com/express/feature/image/resize

by toonkidd; ; Report

CoppeliaFoxworth

 CoppeliaFoxworth's profile picture

do you know how to change it into bugs?


Report Comment



put bug emojis where the snowflakes are
or really tiny pictures of bugs. like, 16x16 maybe.

by Twilight Sparkle; ; Report

thank you!!

by CoppeliaFoxworth; ; Report

🍓╰(*´︶`*)╯♡ 𝒦𝒶𝓎𝓁𝑒𝓃𝑒🍓

 🍓╰(*´︶`*)╯♡ 𝒦𝒶𝓎𝓁𝑒𝓃𝑒🍓's profile picture

ok so my issue is that the snowflakes are only in the "About Me" section and not my whole page lol


Report Comment



to the style, try adding .snowflakes{position:absolute;width:100%;height:100%}? or .snowflake{position:absolute;}
i don't quite remember which one it is (orz)

by Twilight Sparkle; ; Report

.snowflakes{position:absolute;width:100%;height:100%}

It's this one. Worked for me! Thank you!

by Kayley; ; Report

𝕣𝕒𝕚𝕟𝕓𝕠𝕨

 𝕣𝕒𝕚𝕟𝕓𝕠𝕨's profile picture

was able to change them to hearts!! thanks so much!


Report Comment

Ellie <3

 Ellie <3's profile picture

how do you actually change the little icons? I'd love mine to be cute lil hearts but can't quite get my head round code


Report Comment



hi~ not sure if you figured it out yet but paste what they have posted then go in and change all of the snowflakes to hearts!! copy this and paste ---->>

by 𝕣𝕒𝕚𝕟𝕓𝕠𝕨; ; Report

i got it thank you💕💕

by Ellie <3; ; Report

𝐼𝓉'𝓈 𝐵𝓇𝒾𝓉𝓉𝒶𝓃𝓎 𝐵!𝓉𝒸𝒽

 𝐼𝓉'𝓈 𝐵𝓇𝒾𝓉𝓉𝒶𝓃𝓎 𝐵!𝓉𝒸𝒽's profile picture

Mine only works until I scroll my profile can someone help with that?? I'm sorry, idk what I'm doing


Report Comment

𝖙𝖊𝖑𝖑𝖒𝖊𝖙𝖍𝖊𝖙𝖊𝖗𝖚𝖙𝖍🦇🥀

 𝖙𝖊𝖑𝖑𝖒𝖊𝖙𝖍𝖊𝖙𝖊𝖗𝖚𝖙𝖍🦇🥀's profile picture

I LOVE it thank you I changed it to roses and it works great!


Report Comment

ˣ¥ˣ•ᴹʳˢ.ᴷ•ˣ¥ˣ

 ˣ¥ˣ•ᴹʳˢ.ᴷ•ˣ¥ˣ's profile picture

idk what i did but my sparkles arre falling in one spot and going in circles lol


Report Comment



So I had the same issue too, for some reason the closing div tags didn't copy so I had to go in and manually close each snowflake and it worked! Make sure that the arrow slash div arrow is at the end of each individual snowflake and it should work correctly! (Edited because I pasted the example code in this comment and it added my snowflakes to this page 🤦‍♀️)

by Alex C.; ; Report

☾ pej ☽

 ☾ pej ☽'s profile picture

have been trying for WEEKs thanks so much !!!!!!!!!!!


Report Comment