{"id":4564,"date":"2016-11-25T20:11:08","date_gmt":"2016-11-25T10:11:08","guid":{"rendered":"http:\/\/codemyui.com\/?p=4564"},"modified":"2018-05-17T09:51:19","modified_gmt":"2018-05-16T23:51:19","slug":"falling-snowflake-background-animation-pure-css","status":"publish","type":"post","link":"https:\/\/codemyui.com\/falling-snowflake-background-animation-pure-css\/","title":{"rendered":"Falling Snowflake Background Animation in Pure CSS"},"content":{"rendered":"<p>This is a <a href=\"https:\/\/codemyui.com\/tag\/animation\/\">great animation<\/a> that you can add on your website during <a href=\"https:\/\/codemyui.com\/category\/events\/christmas\/\">Christmas time<\/a>. In this animation, you can see falling snowflake to your website with a slight wind effect to it time to time. Designed by <a href=\"https:\/\/twitter.com\/nickycdk\" target=\"_blank\" rel=\"noopener\">Nicky Christensen<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/b286f2051d03ee31832a9f57040537ce\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Pure CSS Snow Snippet<\/h2>\n<p class='codepen'  data-height='463' data-theme-id='0' data-slug-hash='AIonk' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen CSS3 Snow Animation by Nicky Christensen (@NickyCDK) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is a great animation that you can add on your website during Christmas time. In this animation, you can see falling snowflake to your website with a slight wind effect to it time to time. Designed by Nicky Christensen.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/falling-snowflake-background-animation-pure-css\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":4620,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[1807,15607,38934147],"class_list":["post-4564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-christmas","tag-hero-section","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/pure-css-snow-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":4878,"url":"https:\/\/codemyui.com\/single-div-pure-css-christmas-tree\/","url_meta":{"origin":4564,"position":0},"title":"Single Div Pure CSS Christmas Tree","author":"Hima Vincent","date":"December 18, 2016","format":false,"excerpt":"This is a Christmas tree that you can use on your website. This animation is created in pure CSS. You can see a minimalist tree with a tree topper in a circular space with snow falling in the background. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"christmas\"","block_context":{"text":"christmas","link":"https:\/\/codemyui.com\/tag\/christmas\/"},"img":{"alt_text":"Single Div Pure CSS Christmas Tree","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/single-div-pure-css-christmas-tree.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/single-div-pure-css-christmas-tree.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/single-div-pure-css-christmas-tree.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/single-div-pure-css-christmas-tree.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3963,"url":"https:\/\/codemyui.com\/christmas-background-pure-css\/","url_meta":{"origin":4564,"position":1},"title":"Christmas Background in Pure CSS","author":"Hima Vincent","date":"November 9, 2016","format":false,"excerpt":"This is something that you can use as a background of your website. It will especially work great at Christmas time. In this code snippet, we use CSS to create a tree, a snowman, a bauble and a snowflake. It is repeated over and over to have a nice background\u2026","rel":"","context":"In \"christmas\"","block_context":{"text":"christmas","link":"https:\/\/codemyui.com\/tag\/christmas\/"},"img":{"alt_text":"Christmas Background in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/christmas-background-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/christmas-background-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/christmas-background-in-pure-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/christmas-background-in-pure-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25232,"url":"https:\/\/codemyui.com\/pure-css-3d-christmas-tree-animation\/","url_meta":{"origin":4564,"position":2},"title":"Pure CSS 3D Christmas Tree Animation","author":"Saijo George","date":"December 14, 2017","format":false,"excerpt":"You can use this pure CSS snippet to add a fancy christmas tree animation to you webpage, it was designed by Ana Travas. If you are having trouble with the pen, try the archived copy on GitHub CSS Christmas Tree Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29055,"url":"https:\/\/codemyui.com\/css-only-candy-cane-text-animation\/","url_meta":{"origin":4564,"position":3},"title":"CSS Only Candy Cane Text Animation","author":"Saijo George","date":"December 16, 2019","format":false,"excerpt":"This is a simple but pretty text animation in pure CSS by kaleidawave that allows you to add a nice Christmassy candy cane text effect to your website. The effect mimics the traditional red and white stripes for the text. If you are having trouble with the pen, try the\u2026","rel":"","context":"In \"christmas\"","block_context":{"text":"christmas","link":"https:\/\/codemyui.com\/tag\/christmas\/"},"img":{"alt_text":"CSS Only Candy Cane Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/CSS-Only-Candy-Cane-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/CSS-Only-Candy-Cane-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/CSS-Only-Candy-Cane-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/CSS-Only-Candy-Cane-Text-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":22869,"url":"https:\/\/codemyui.com\/muted-color-weather-icon-animation-css\/","url_meta":{"origin":4564,"position":4},"title":"Muted Color Weather Icon Animation in CSS","author":"Hima Vincent","date":"July 31, 2017","format":false,"excerpt":"We have seen a few different weather animations and this is a new one designed by Shay. There are 4 different animations here Sunny, Partly Cloudy, Rainy and Snow all in pure CSS. If you are having trouble with the pen, try the archived copy on GitHub Muted Color Weather\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Muted Color Weather Icon Animation in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/muted-color-weather-icon-animation-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/muted-color-weather-icon-animation-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/muted-color-weather-icon-animation-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/muted-color-weather-icon-animation-in-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4842,"url":"https:\/\/codemyui.com\/laughing-santa-claus-in-pure-css\/","url_meta":{"origin":4564,"position":5},"title":"Laughing Santa Claus in Pure CSS","author":"Hima Vincent","date":"December 18, 2016","format":false,"excerpt":"Using this Pure CSS snippet you can show a giggling Santa Claus in your Christmas web pages and emails. It was designed by Alireza Sheikholmolouki. If you are having trouble with the pen, try the archived copy on GitHub Giggling Santa Claus Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Laughing Santa Claus in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/laughing-santa-claus-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/laughing-santa-claus-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/laughing-santa-claus-in-pure-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/laughing-santa-claus-in-pure-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=4564"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4564\/revisions"}],"predecessor-version":[{"id":25976,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4564\/revisions\/25976"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/4620"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=4564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=4564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=4564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}