Skip to content

Instantly share code, notes, and snippets.

@danielpclark

danielpclark/flicker.html

Created April 12, 2018 04:41
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 danielpclark/bed2191883c7beeac3c65eb8ca244e9d to your computer and use it in GitHub Desktop.
Save danielpclark/bed2191883c7beeac3c65eb8ca244e9d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flicker.html
<html>
<body>
<style>
.ebb-bottom {
background-image: url(https://6ftdan.com/wp-content/uploads/2018/04/ebbnflow.png);
background-size: 400px 400px;
}
.images > div {
float: left;
width: 400px;
height: 400px;
}
.glow-image {
animation-name: glow;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count:infinite;
}
@keyframes glow{
0% {
outline: none;
background-image: url(https://6ftdan.com/wp-content/uploads/2018/04/ebbnflow-neon-backlit.png);
}
50% {
outline: none;
background-image:
url(https://6ftdan.com/wp-content/uploads/2018/04/ebbnflow.png),
url(https://6ftdan.com/wp-content/uploads/2018/04/ebbnflow-neon-backlit.png);
background-blend-mode:lighten;
}
100% {
outline: none;
background-image: url(https://6ftdan.com/wp-content/uploads/2018/04/ebbnflow-neon-backlit.png);
}
}
</style>
<div class="images">
<div class="ebb-bottom glow-image">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment