{"id":5140,"date":"2020-07-16T13:32:00","date_gmt":"2020-07-16T13:32:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5140"},"modified":"2020-08-21T13:45:10","modified_gmt":"2020-08-21T13:45:10","slug":"css-neon-animation","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/css-neon-animation\/","title":{"rendered":"CSS Neon Animation"},"content":{"rendered":"\n<p>Today, we teach you how to create a <strong>CSS neon animation<\/strong>. So, <strong>Let&#8217;s get started<\/strong>.<\/p>\n\n\n\n<h2>01. Building HTML Structure<\/h2>\n\n\n\n<p>As for our\u00a0<code>HTML<\/code>\u00a0we need the following structure:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\">\n  &lt;div class=\"text\">\n    &lt;b>100 s&lt;span>u&lt;\/span>bs&lt;\/b>\n  &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>We are going to use the container to center everything and use the span to make a cool neon glitch.<\/p>\n\n\n\n<h2>02. Picking Font<\/h2>\n\n\n\n<p>First we are going to import a cool\u00a0<a href=\"https:\/\/daily-dev-tips.com\/posts\/how-to-use-google-fonts\/\">Google font<\/a>, which looks like it could be used in Neon letters.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url(\/\/fonts.googleapis.com\/css?family=Pacifico);<\/code><\/pre>\n\n\n\n<p>The on to our <strong>Neon effect<\/strong>!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.text b {\n  font: 400 25vh 'Pacifico';\n  letter-spacing: -5px;\n  color: #fee;\n  text-shadow: 0 0px 10px, 0 0 1em #560a86, 0 0 0.5em #560a86, 0 0 0.1em #560a86,\n    0 10px 3px #333;\n}<\/code><\/pre>\n\n\n\n<p>As you see, we are setting our font to be the Google Font, and making it a font-weight of\u00a0<code>25vh<\/code>\u00a0(25%\u00a0Viewport Height.<\/p>\n\n\n\n<p>Then we are using the&nbsp;<code>text-shadow<\/code>&nbsp;to make it show as Neon. We add multiple glow &#8220;layers&#8221; and end with a dark grey to make it appear thicker.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Note: You can use a cool tool like this for\u00a0<a href=\"http:\/\/angrytools.com\/css-generator\/text-shadow\/\">creating text-shadows<\/a>.<\/p><\/blockquote>\n\n\n\n<h2>03. Now lets talk about Animation<\/h2>\n\n\n\n<p>We added a glitch on the\u00a0<code>u<\/code>\u00a0letter. This is common in Neon, and we can re-create this using\u00a0<code>CSS<\/code>\u00a0Animations.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.text b span {\n  animation: flicker linear infinite 2s;\n}\n\n@keyframes flicker {\n  75% {\n    color: inherit;\n    text-shadow: inherit;\n  }\n  76% {\n    color: #222;\n  }\n  77% {\n    color: inherit;\n    text-shadow: none;\n  }\n  78% {\n    color: inherit;\n    text-shadow: inherit;\n  }\n  79% {\n    color: #222;\n    text-shadow: none;\n  }\n  80% {\n    color: inherit;\n    text-shadow: inherit;\n  }\n  90% {\n    color: #222;\n    text-shadow: none;\n  }\n  90.5% {\n    color: inherit;\n    text-shadow: inherit;\n  }\n}<\/code><\/pre>\n\n\n\n<p>The actual animation is a mix of resetting the color and removing the text-shadow for a split second; this gives it the appeal of flickering.<\/p>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"CSS Neon Animation\" id=\"cp_embed_WNwGVMv\" src=\"https:\/\/codepen.io\/rebelchris\/embed\/preview\/WNwGVMv?height=300&amp;slug-hash=WNwGVMv&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Today, we teach you how to create a CSS neon animation. So, Let&#8217;s get started. 01. Building HTML Structure As for our\u00a0HTML\u00a0we need the following structure: We are going to use the container to center everything and use the span to make a cool neon glitch. 02. Picking Font First we are going to import [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5141,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145],"tags":[93,25,56,94,146,116,110,217],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/CSS-Neon-Animation.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1kU","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5140"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5140"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5140\/revisions"}],"predecessor-version":[{"id":5142,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5140\/revisions\/5142"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5141"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}