SCSS
html, body {
margin: 0;
}
@keyframes fadeOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes slide {
0% {
top: 0px;
}
16.66667% {
top: -98px;
}
33.33333% {
top: -196px;
}
50% {
top: -196px;
}
66.66667% {
top: -98px;
}
83.33333% {
top: 0px;
}
}
header {
height: 100vh;
width: 100vw;
background: linear-gradient(135deg, #63b6db 0%, #d132a9 100%);
}
header::before {
background: linear-gradient(135deg, #5fce80 0%, #309dcf 100%);
display: block;
width: 100%;
height: 100%;
content: '';
position: absolute;
animation: fadeOut 10s linear infinite;
}
header .title {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: 'Lato', sans-serif;
width: 288px;
font-size: 40px;
}
header .title strong {
top: 28px;
position: relative;
margin-left: 10px;
}
header .title .titlesOverlay {
overflow: hidden;
float: left;
width: 240px;
height: 98px;
}
header .title .titlesOverlay .titles {
animation: slide 10s ease-in-out infinite;
position: relative;
display: block;
}
header .title .titlesOverlay .titles h1 {
font-weight: 200;
margin: 0;
width: 100%;
height: 100%;
text-align: right;
}
