{"id":13936,"date":"2017-03-28T00:05:51","date_gmt":"2017-03-27T14:05:51","guid":{"rendered":"https:\/\/codemyui.com\/?p=13936"},"modified":"2018-05-16T16:45:09","modified_gmt":"2018-05-16T06:45:09","slug":"flickering-light-text-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/flickering-light-text-effect\/","title":{"rendered":"Flickering Light Text Effect"},"content":{"rendered":"<p>A fancy flickering light <a href=\"https:\/\/codemyui.com\/tag\/text-animation\/\">text effect<\/a> designed by <a href=\"https:\/\/twitter.com\/Mandy_Kerr\" target=\"_blank\" rel=\"noopener\">Mandy Michael<\/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\/ae834e330c77aea2a994eddc2a86950e\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Flickering Light Text Snippet<\/h2>\n<p class='codepen'  data-height='588' data-theme-id='0' data-slug-hash='aJLYVz' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Flickering Light Text Effect by Mandy Michael (@mandymichael) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>A fancy flickering light text effect designed by Mandy Michael.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/flickering-light-text-effect\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":13941,"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":[18697259,6168,1512930],"class_list":["post-13936","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-distortion-effect","tag-halloween","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/flickering-text-effect.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":17888,"url":"https:\/\/codemyui.com\/overflow-text-effect-using-css\/","url_meta":{"origin":13936,"position":0},"title":"Overflow Text Effect using CSS","author":"Hima Vincent","date":"June 16, 2017","format":false,"excerpt":"Here is a simple CSS only snippet by Mandy Michael to create an overflow text effect for your content. If you are having trouble with the pen, try the archived copy on GitHub Content Overflow Snippet","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Overflow Text Effect using CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/overflow-text-effect-using-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\/06\/overflow-text-effect-using-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/overflow-text-effect-using-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/overflow-text-effect-using-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26687,"url":"https:\/\/codemyui.com\/3d-uppercase-text-with-shadow\/","url_meta":{"origin":13936,"position":1},"title":"3D Uppercase Text With Shadow","author":"Saijo George","date":"July 17, 2018","format":false,"excerpt":"A nice little text animation that features an awesome 3D text effect designed by Mandy Michael. If you are having trouble with the pen, try the archived copy on GitHub 3D Text with Shadow Snippet","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Uppercase Text With Shadow","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25142,"url":"https:\/\/codemyui.com\/peel-away-sticker-text-effect\/","url_meta":{"origin":13936,"position":2},"title":"Peel Away Sticker Text Effect","author":"Saijo George","date":"November 18, 2017","format":false,"excerpt":"A really cool CSS only text effect designed by Mandy Michael. It feels like the text is peeling away like a sticker. If you are having trouble with the pen, try the archived copy on GitHub Sticker Text Effect Snippet","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Peel Away Sticker Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/peel-away-sticker-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\/2017\/11\/peel-away-sticker-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/peel-away-sticker-text-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/peel-away-sticker-text-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26461,"url":"https:\/\/codemyui.com\/growing-grass-text-effect-with-variable-font\/","url_meta":{"origin":13936,"position":3},"title":"Growing Grass Text Effect with Variable Font","author":"Saijo George","date":"June 21, 2018","format":false,"excerpt":"This spectacular text animation is by Mandy Michael, it uses Variable Font to create the effect of grass growing out of the text. Have a gardening or landscaping business this can be a fancy way to do things on your webpage. If you are having trouble with the pen, try\u2026","rel":"","context":"In \"text animation\"","block_context":{"text":"text animation","link":"https:\/\/codemyui.com\/tag\/text-animation\/"},"img":{"alt_text":"Growing Grass Text Effect with Variable Font","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Growing-Grass-Text-Effect-with-Variable-Font.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Growing-Grass-Text-Effect-with-Variable-Font.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Growing-Grass-Text-Effect-with-Variable-Font.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Growing-Grass-Text-Effect-with-Variable-Font.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26468,"url":"https:\/\/codemyui.com\/squash-and-stretch-text-animation-using-variable-font\/","url_meta":{"origin":13936,"position":4},"title":"Squash and Stretch Text Animation using Variable Font","author":"Saijo George","date":"June 27, 2018","format":false,"excerpt":"Here is another variable font demo by Mandy Michael. In this css only text animation, you have 2 part text one which squashes while the other stretches giving the text a very comic book\/cartoon visual style. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"comic book\"","block_context":{"text":"comic book","link":"https:\/\/codemyui.com\/tag\/comic-book\/"},"img":{"alt_text":"Squash and Stretch Text Animation using Variable Font","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/you_just_get_stronger.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/you_just_get_stronger.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/you_just_get_stronger.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/you_just_get_stronger.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29648,"url":"https:\/\/codemyui.com\/flickering-light-text-animation-in-css\/","url_meta":{"origin":13936,"position":5},"title":"Flickering Light Text Animation in CSS","author":"Saijo George","date":"April 20, 2020","format":false,"excerpt":"Code by: Prathamesh Koshti from Codepen If you are having trouble with the pen, try the archived copy on GitHub Text Flickering Snippet","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"Flickering Light Text Animation in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Flickering-Light-Text-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\/2020\/04\/Flickering-Light-Text-Animation-in-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Flickering-Light-Text-Animation-in-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Flickering-Light-Text-Animation-in-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\/13936","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=13936"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/13936\/revisions"}],"predecessor-version":[{"id":25864,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/13936\/revisions\/25864"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/13941"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=13936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=13936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=13936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}