Skip to content

Instantly share code, notes, and snippets.

@sinewalker

sinewalker/Blinken Light

Forked from navinpai/README
Last active August 25, 2017 22:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sinewalker/3c2624650040c4c37000 to your computer and use it in GitHub Desktop.
Save sinewalker/3c2624650040c4c37000 to your computer and use it in GitHub Desktop.
Download ZIP
remove the browser prefixes -- animation andn @Keyframes are standards now.
Raw
Blinken Light
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.
Raw
simple_cursor.css
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;
}
div.cursor {
display: inline-block;
background: #111;
margin-left: 1px;
animation: blink 2s linear 0s infinite;
}
@keyframes blink {
0% { background: #0a0 }
47% { background: #090 }
50% { background: #000 }
97% { background: #000 }
100% { background: #090 }
}
Raw
simple_cursor.html
<!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