Skip to content

Instantly share code, notes, and snippets.

@navinpai
Created June 9, 2012 19:18
  • Star 24 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save navinpai/2902229 to your computer and use it in GitHub Desktop.
Simple CSS Blinking Cursor
Simple blinking cursor... code from http://xip.io/ ... Ofcourse I don't own the code! Just keeping it here as a reference of the CSS3 code used.
html {
background: #111;
}
body {
color: #090;
width: 480px;
margin: 50px auto;
font-family: Courier New, Courier, monospace;
font-size: 14px;
font-weight: bold;
line-height: 16px;
-webkit-font-smoothing: antialiased;
}
div.cursor {
display: inline-block;
background: #111;
margin-left: 1px;
-webkit-animation: blink 2s linear 0s infinite;
-moz-animation: blink 2s linear 0s infinite;
-ms-animation: blink 2s linear 0s infinite;
-o-animation: blink 2s linear 0s infinite;
}
@-webkit-keyframes blink {
0% { background: #0a0 }
47% { background: #090 }
50% { background: #000 }
97% { background: #000 }
100% { background: #090 }
}
@-moz-keyframes blink {
0% { background: #0a0 }
47% { background: #090 }
50% { background: #000 }
97% { background: #000 }
100% { background: #090 }
}
@-ms-keyframes blink {
0% { background: #0a0 }
47% { background: #090 }
50% { background: #000 }
97% { background: #000 }
100% { background: #090 }
}
@-o-keyframes blink {
0% { background: #0a0 }
47% { background: #090 }
50% { background: #000 }
97% { background: #000 }
100% { background: #090 }
}
<!doctype html>
<html>
<head>
<title>simple_cursor</title>
<link rel="stylesheet" href="simple_cursor.css">
</head>
<body>
<pre>
<div class="cursor"> </div>
</pre>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment