Skip to content

Instantly share code, notes, and snippets.

@kerkenit

kerkenit/PixelReset.css

Last active January 22, 2018 08:39
Show Gist options
  • Save kerkenit/29ac0a8b6af6bfc5da5e435f340f23b7 to your computer and use it in GitHub Desktop.
Save kerkenit/29ac0a8b6af6bfc5da5e435f340f23b7 to your computer and use it in GitHub Desktop.
Download ZIP
Reset the pixels of a screen to prevent burning in
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PixelReset</title>
<link rel="stylesheet" type="text/css" href="PixelReset.css" />
</head>
<body>
<div id="PixelReset"></div>
</body>
</html>
Raw
PixelReset.css
#PixelReset {
position: absolute;
left:0;
top:0;
width: 100%;
min-height: 100%;
z-index: 2147483647;
background: linear-gradient(270deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
background-size: 1200% 1200%;
-webkit-animation: PixelReset 120s ease infinite;
-moz-animation: PixelReset 120s ease infinite;
-o-animation: PixelReset 120s ease infinite;
animation: PixelReset 120s ease infinite;
}
@-webkit-keyframes PixelReset {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes PixelReset {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes PixelReset {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes PixelReset {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment