Skip to content

Instantly share code, notes, and snippets.

@rybak

rybak/no-backseat.html

Last active June 17, 2020 11:38
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 rybak/3dbc555891ed0be825dbdf72bb86ddc4 to your computer and use it in GitHub Desktop.
Save rybak/3dbc555891ed0be825dbdf72bb86ddc4 to your computer and use it in GitHub Desktop.
Download ZIP
DVD-screensaver-like animation
Raw
no-backseat.html
<html>
<head>
<title>DVD screensaver</title>
<style>
.text {
font-family: monospace;
font-size: 600%;
color: red;
animation: color-change 3s infinite;
white-space: nowrap;
}
@keyframes color-change {
0% { color: red; }
50% { color: blue; }
}
.box-horizontal {
position: absolute;
top: 0px;
left: 0px;
animation: dvd-screensaver-horizontal 7s infinite;
}
.box-vertical {
position: absolute;
left: 0px;
top: 0px;
animation: dvd-screensaver-vertical 11s infinite;
}
@keyframes dvd-screensaver-horizontal {
0% { left: 0px; }
50% { left: 640px; }
}
@keyframes dvd-screensaver-vertical {
0% { top: 0px; }
50% { top: 480px; }
}
.scaler {
animation: scale 5s infinite;
}
@keyframes scale {
0% { transform: scaleX(0.5) scaleY(0.5); }
50% { transform: scaleX(1.0) scaleY(1.0); }
100% { transform: scaleX(0.5) scaleY(0.5); }
}
body {
/* background-color: lime; */
}
</style>
</head>
<body>
<div class="box-horizontal">
<div class="box-vertical">
<div class="scaler">
<span class="text">No backseating!</span>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment