<body class="flex">
<main class="wrapper">
<figure class="text">
<section class="line">
<p>KEWIN</p>
<p>MARCHAND</p>
<p>DESIGNER WEB</p>
</section>
<section class="line">
<p>MARCHAND</p>
<p>DESIGNER WEB</p>
<p>KEWIN</p>
</section>
<section class="line">
<p>DESIGNER WEB</p>
<p>KEWIN</p>
<p>MARCHAND</p>
</section>
</figure>
</main>
</body>@import url(https://fonts.googleapis.com/css?family=Bangers);
* {
margin:0;
padding:0;
box-sizing:border-box;
list-style: none;
}
body {
background: hsl(178, 35%, 35%);
box-shadow: inset 0 0 8vh hsl(178, 15%, 15%);
color: #fff;
font-family: 'Bangers';
font-size: 16px;
min-height: 100vh;
font-size: 86px;
text-align: left;
text-transform: uppercase;
font-weight: bold;
text-align: center;
line-height: .9;
white-space: nowrap;
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.text .line {
overflow-y: hidden;
white-space: nowrap;
height: 70px;
}
.text .line:first-child + .line {
margin-left: 75px;
}
.text .line:first-child + .line + .line {
margin-left: 150px;
}
p {
height: 70px;
font-size: 1em;
}
.text .line:nth-child(odd) {
transform: skew(60deg, -30deg) scaleY(0.66667);
}
.text .line:nth-child(even) {
transform: skew(0deg, -30deg) scaleY(1.33333);
}
.wrapper .text .line p {
animation: moveWords 6s infinite ease;
}
@keyframes moveWords {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}$(function(){
});
External CSS
This Pen doesn't use any external CSS resources.