CSS
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
background: #fff;
}
img {
max-width: 100%;
height: auto;
}
html {
font-size: 62.5%;
}
body {
color: #222;
font-size: 1.6rem;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.xx-Demo body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.l-Wrapper {
min-height: 100vh;
display: flex;
align-items: center;
padding: 0 15%;
background: linear-gradient(45deg, #e7b0c6 0%, #f9e2ee 100%);
}
.Title {
font-size: 50px;
font-size: 14vw;
color: grey;
line-height: 0.9;
text-transform: uppercase;
position: relative;
z-index: 1;
width: 3em;
margin-top: 1.6rem;
margin-bottom: 1.6rem;
border: 0.5em solid transparent;
box-shadow: -10px 30px 100px -20px rgba(70, 21, 41, 0.5), 0 0 25px 0 rgba(70, 21, 41, 0.05);
}
@media (max-width: 250px) {
.Title {
font-size: 35px;
}
}
@media (min-width: 642.85714px) {
.Title {
font-size: 90px;
}
}
.Title:before, .Title:after {
content: attr(data-title);
position: absolute;
top: 0;
mix-blend-mode: color-burn;
transition: left 0.25s cubic-bezier(0.53, 0.21, 0.29, 0.67);
animation: shift-a 2.5s cubic-bezier(0.53, 0.21, 0.29, 0.67);
}
.Title:before {
color: #e93541;
left: -0.05em;
}
.Title:after {
color: #00b5dd;
left: 0.05em;
animation-name: shift-b;
}
.Title:hover:before {
left: 0.05em;
}
.Title:hover:after {
left: -0.05em;
}
.Title-text {
color: #fff;
font-size: 0.24em;
font-weight: bold;
text-transform: none;
line-height: 1.2;
display: block;
margin: 0;
}
.Title-text:before {
content: "";
display: block;
width: 1.2em;
height: 3px;
margin-top: 2em;
margin-bottom: 1em;
background: currentColor;
}
@keyframes shift-a {
0% {
left: 0;
}
25% {
left: 0.05em;
}
100% {
left: -0.05em;
}
}
@keyframes shift-b {
0% {
left: 0;
}
25% {
left: -0.05em;
}
100% {
left: 0.05em;
}
}
