Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
CSS Flicker Full
<!DOCTYPE html>
<title>Flickering Text</title>
<script src="" type="text/javascript"></script>
body {
background: #666;
background-image: url('txture.png');
padding: 1em;
font-size: 36px;
font-family: 'DejaVu Serif', 'Georgia', serif;
#text-block {
color: white;
text-shadow: white 0 0 3px;
font-size: 1.5em;
#text-block .flickr {
color: transparent;
text-shadow: white 0 0 1px;
-webkit-transition: text-shadow 0.2s ease-in-out;
-moz-transition: text-shadow 0.2s ease-in-out;
transition: text-shadow 0.2s ease-in-out;
/* Transitions defined for smoother anim. */
#wrap {
margin-top: 50px;
width: 100%;
#logo {
margin: auto;
width: 500px;
text-align: center;
<div id="wrap">
<div id="logo">
<div id="text-block">
i am a <span class="flickr">bad</span> lamp
<script type="text/javascript">
$(document).ready(function() {
setInterval(function() {
var val = 1;
if (Math.random() > 0.5) {
val = Math.floor((Math.random()*10)+1);
$(".flickr").css("text-shadow", "white 0 0 " + val + "px");
}, 200);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.