{"id":19679,"date":"2022-12-20T07:12:42","date_gmt":"2022-12-20T06:12:42","guid":{"rendered":"https:\/\/jng-web.com\/labo\/?p=19679"},"modified":"2022-12-11T21:43:21","modified_gmt":"2022-12-11T20:43:21","slug":"une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter","status":"publish","type":"post","link":"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/","title":{"rendered":"Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter"},"content":{"rendered":"<div class=\"advads-avant-le-contenu\" id=\"advads-3344567547\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-4944504088214075\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-4944504088214075\" \ndata-ad-slot=\"4514395581\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><div class=\"advads-test\" style=\"margin-left: auto;margin-right: auto;text-align: center;\" id=\"advads-2928244721\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-4944504088214075\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-4944504088214075\" \ndata-ad-slot=\"4514395581\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><p>Envie d&rsquo;une animation de neige qui tombe en full HTML + CSS sans utiliser de JavaScript ? La ressource suivante va vous ravir. Sur CodePen, \u00c1sia Bogacz nous propose son projet CSS Snowy Winter. Ce projet est une animation utilisant uniquement du code CSS et HTML. Vous retrouverez le code et la d\u00e9monstration de ce projet via le lien pr\u00e9sent sous l&rsquo;image ci-dessous.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-19680\" src=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2022\/12\/css-snwwy-winter.jpg\" alt=\"css snowy winter\" width=\"938\" height=\"457\" srcset=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2022\/12\/css-snwwy-winter.jpg 938w, https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2022\/12\/css-snwwy-winter-300x146.jpg 300w, https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2022\/12\/css-snwwy-winter-768x374.jpg 768w\" sizes=\"auto, (max-width: 938px) 100vw, 938px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">D\u00e9mo et code : <a href=\"https:\/\/codepen.io\/FlyBirds-Box\/pen\/XWYGgGE\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/FlyBirds-Box\/pen\/XWYGgGE<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Envie d&rsquo;une animation de neige qui tombe en full HTML + CSS sans utiliser de JavaScript ? La ressource suivante va vous ravir. Sur CodePen, &hellip; <\/p>\n","protected":false},"author":2,"featured_media":19680,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[28,37],"class_list":["post-19679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-5-et-css-3","tag-css","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter - Labo JNG WEB<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter - Labo JNG WEB\" \/>\n<meta property=\"og:description\" content=\"Envie d&rsquo;une animation de neige qui tombe en full HTML + CSS sans utiliser de JavaScript ? La ressource suivante va vous ravir. Sur CodePen, &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/\" \/>\n<meta property=\"og:site_name\" content=\"Labo JNG WEB\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webmaster.referencement.dijon\" \/>\n<meta property=\"article:author\" content=\"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-20T06:12:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-11T20:43:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2022\/12\/css-snwwy-winter.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"938\" \/>\n\t<meta property=\"og:image:height\" content=\"457\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"J\u00e9r\u00f4me\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"J\u00e9r\u00f4me\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/\"},\"author\":{\"name\":\"J\u00e9r\u00f4me\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590\"},\"headline\":\"Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter\",\"datePublished\":\"2022-12-20T06:12:42+00:00\",\"dateModified\":\"2022-12-11T20:43:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/\"},\"wordCount\":87,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\"},\"keywords\":[\"CSS\",\"HTML\"],\"articleSection\":[\"HTML 5 et CSS 3\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/\",\"url\":\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/\",\"name\":\"Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter - Labo JNG WEB\",\"isPartOf\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#website\"},\"datePublished\":\"2022-12-20T06:12:42+00:00\",\"dateModified\":\"2022-12-11T20:43:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Labo Jng Web\",\"item\":\"https:\/\/jng-web.com\/labo\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML 5 et CSS 3\",\"item\":\"https:\/\/jng-web.com\/labo\/html-5-et-css-3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jng-web.com\/labo\/#website\",\"url\":\"https:\/\/jng-web.com\/labo\/\",\"name\":\"Labo JNG WEB\",\"description\":\"R\u00e9f\u00e9rencement, Webmastering, CMS, Logiciels ...\",\"publisher\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jng-web.com\/labo\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\",\"name\":\"JNG WEB \/\/ J\u00e9r\u00f4me Guri\",\"url\":\"https:\/\/jng-web.com\/labo\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png\",\"contentUrl\":\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png\",\"width\":342,\"height\":110,\"caption\":\"JNG WEB \/\/ J\u00e9r\u00f4me Guri\"},\"image\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webmaster.referencement.dijon\",\"https:\/\/twitter.com\/jng_web\",\"https:\/\/fr.linkedin.com\/in\/jeromeguri\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590\",\"name\":\"J\u00e9r\u00f4me\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g\",\"caption\":\"J\u00e9r\u00f4me\"},\"description\":\"Passionn\u00e9 par le web, je m'int\u00e9resse depuis quelques ann\u00e9es aux technologies de l'information et de la communication, et plus particuli\u00e8rement \u00e0 la cr\u00e9ation et au r\u00e9f\u00e9rencement de sites internet.\",\"sameAs\":[\"http:\/\/www.jng-web.com\",\"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster\",\"https:\/\/twitter.com\/JngWeb21\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter - Labo JNG WEB","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/","og_locale":"fr_FR","og_type":"article","og_title":"Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter - Labo JNG WEB","og_description":"Envie d&rsquo;une animation de neige qui tombe en full HTML + CSS sans utiliser de JavaScript ? La ressource suivante va vous ravir. Sur CodePen, &hellip;","og_url":"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/","og_site_name":"Labo JNG WEB","article_publisher":"https:\/\/www.facebook.com\/webmaster.referencement.dijon","article_author":"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster","article_published_time":"2022-12-20T06:12:42+00:00","article_modified_time":"2022-12-11T20:43:21+00:00","og_image":[{"width":938,"height":457,"url":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2022\/12\/css-snwwy-winter.jpg","type":"image\/jpeg"}],"author":"J\u00e9r\u00f4me","twitter_misc":{"\u00c9crit par":"J\u00e9r\u00f4me","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/#article","isPartOf":{"@id":"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/"},"author":{"name":"J\u00e9r\u00f4me","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590"},"headline":"Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter","datePublished":"2022-12-20T06:12:42+00:00","dateModified":"2022-12-11T20:43:21+00:00","mainEntityOfPage":{"@id":"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/"},"wordCount":87,"commentCount":0,"publisher":{"@id":"https:\/\/jng-web.com\/labo\/#organization"},"keywords":["CSS","HTML"],"articleSection":["HTML 5 et CSS 3"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/","url":"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/","name":"Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter - Labo JNG WEB","isPartOf":{"@id":"https:\/\/jng-web.com\/labo\/#website"},"datePublished":"2022-12-20T06:12:42+00:00","dateModified":"2022-12-11T20:43:21+00:00","breadcrumb":{"@id":"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jng-web.com\/labo\/une-animation-de-neige-qui-tombe-en-html-et-css-css-snow-winter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Labo Jng Web","item":"https:\/\/jng-web.com\/labo\/"},{"@type":"ListItem","position":2,"name":"HTML 5 et CSS 3","item":"https:\/\/jng-web.com\/labo\/html-5-et-css-3\/"},{"@type":"ListItem","position":3,"name":"Une animation de neige qui tombe en HTML et CSS : CSS Snow Winter"}]},{"@type":"WebSite","@id":"https:\/\/jng-web.com\/labo\/#website","url":"https:\/\/jng-web.com\/labo\/","name":"Labo JNG WEB","description":"R\u00e9f\u00e9rencement, Webmastering, CMS, Logiciels ...","publisher":{"@id":"https:\/\/jng-web.com\/labo\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jng-web.com\/labo\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/jng-web.com\/labo\/#organization","name":"JNG WEB \/\/ J\u00e9r\u00f4me Guri","url":"https:\/\/jng-web.com\/labo\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/","url":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png","contentUrl":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png","width":342,"height":110,"caption":"JNG WEB \/\/ J\u00e9r\u00f4me Guri"},"image":{"@id":"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webmaster.referencement.dijon","https:\/\/twitter.com\/jng_web","https:\/\/fr.linkedin.com\/in\/jeromeguri"]},{"@type":"Person","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590","name":"J\u00e9r\u00f4me","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g","caption":"J\u00e9r\u00f4me"},"description":"Passionn\u00e9 par le web, je m'int\u00e9resse depuis quelques ann\u00e9es aux technologies de l'information et de la communication, et plus particuli\u00e8rement \u00e0 la cr\u00e9ation et au r\u00e9f\u00e9rencement de sites internet.","sameAs":["http:\/\/www.jng-web.com","https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster","https:\/\/twitter.com\/JngWeb21"]}]}},"views":3290,"_links":{"self":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts\/19679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/comments?post=19679"}],"version-history":[{"count":0,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts\/19679\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/media\/19680"}],"wp:attachment":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/media?parent=19679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/categories?post=19679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/tags?post=19679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}