<div id="marquee">
<div>
<span>ONE LOVE ONE HEART</span>
</div>
<div aria-hidden="true">
<span>ONE LOVE ONE HEART</span>
</div>
</div>
@font-face {
font-family: Agency;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/agency-fb-bold.woff);
}
body {
font-family: Avenir, sans-serif;
marging: 0;
}
#marquee {
margin-top: 3rem;
perspective: 500px;
font-size: 0;
font-family: Agency, sans-serif;
}
#marquee div {
display: inline-block;
height: 12rem;
width: 20rem;
position: relative;
}
#marquee div:first-of-type {
background: #e5233e;
transform-origin: top right;
transform: rotateY(-40deg);
color: #fff;
}
#marquee div:last-of-type {
background: #b31e31;
transform-origin: top left;
transform: rotateY(45deg);
color: #f8c9d9;
}
#marquee div {
font-size: 8rem;
overflow: hidden;
}
#marquee div span {
position: absolute;
width: 400%;
line-height: 1.4;
}
#marquee div:first-of-type span {
transform: translateX(40rem);
animation: leftcrawl 14s linear infinite;
text-shadow: 4px 0px 4px rgba(0,0,0,0.3);
}
#marquee div:last-of-type span {
transform: translateX(20rem);
animation: rightcrawl 14s linear infinite;
}
@keyframes leftcrawl {
to { transform: translateX(-100rem); }
}
@keyframes rightcrawl {
to { transform: translateX(-130rem); }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.