Skip to content

Instantly share code, notes, and snippets.

@yoksel
Created September 29, 2013 08:38
Show Gist options
  • Save yoksel/6750508 to your computer and use it in GitHub Desktop.
Save yoksel/6750508 to your computer and use it in GitHub Desktop.
Dance of shadow jsbin.com/IfAzAFO/2/edit
DIV {
width: 2em;
height: 2em;
margin-top: 3em;
background: transparent;
border-radius: 50%;
box-shadow:
2em 0 0 crimson,
4em 0 0 red,
6em 0 0 orangered,
8em 0 0 orange,
10em 0 0 gold,
12em 0 0 yellow,
14em 0 0 greenyellow,
16em 0 0 skyblue,
18em 0 0 steelblue,
20em 0 0 darkmagenta;
animation: boxshadow 3s infinite;
}
@keyframes boxshadow {
50% {
box-shadow:
16em 0 0 skyblue,
12em 0 0 yellow,
2em 0 0 crimson,
18em 0 0 steelblue,
6em 0 0 orangered,
10em 0 0 gold,
4em 0 0 red,
20em 0 0 darkmagenta,
8em 0 0 orange,
14em 0 0 greenyellow;
}
}
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment