Skip to content

Instantly share code, notes, and snippets.

@MarceauKa

MarceauKa/marquee.html

Created March 11, 2020 14: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 MarceauKa/f63cd04bcfb0ffc58ecef2d97a912e6e to your computer and use it in GitHub Desktop.
Save MarceauKa/f63cd04bcfb0ffc58ecef2d97a912e6e to your computer and use it in GitHub Desktop.
Download ZIP
Marquee HTML in CSS
Raw
marquee.html
<!DOCTYPE html>
<html>
<head>
<title>Marquee</title>
<style type="text/css">
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
overflow: hidden;
font-family: monospace;
background-color: black;
color: white;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.marquee {
animation-name: marquee;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
white-space: nowrap;
}
.marquee:hover {
animation-play-state: paused;
}
div.wrap {
border-top: 2px solid white;
border-bottom: 2px solid white;
padding: 10px 0;
}
div.marquee {
font-size: 2rem;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="marquee">Please reach out if you'd like to collaborate. Please reach out if you'd like to collaborate. Please reach out if you'd like to collaborate.</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment