logo

Danger

HTML

 <div class="container">
<div class="stripe">
<div class="stripe_inner">EMANDARINE</div>
</div>
</div>

CSS

.container{
overflow: hidden;
}

.stripe {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.stripe_inner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 8rem;
text-align: center;
font-family: "Anton", sans-serif;
color: rgba(255, 255, 255, 0);
background: repeating-linear-gradient(45deg, #ff7e00e8 25%, #ff7e00e8 50%, #313131 50%, #313131 75%);
background-size: 100px 100px;
-webkit-background-clip: text;
background-clip: text;
-webkit-animation: stripeBackgroundPosition 2s linear infinite;
animation: stripeBackgroundPosition 2s linear infinite;
}

.stripe::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(100% + 100px);
height: 100%;
background: repeating-linear-gradient(45deg, #313131 25%, #313131 50%, #ff7e00e8 50%, #ff7e00e8 75%);
background-size: 100px 100px;
-webkit-animation: stripeTransform 2s linear infinite;
animation: stripeTransform 2s linear infinite;
}

.stripe::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(27, 39, 53, 0) 0%, #090a0f 100%);
}

@-webkit-keyframes stripeTransform {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(100px * -1));
}
}

@keyframes stripeTransform {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(100px * -1));
}
}
@-webkit-keyframes stripeBackgroundPosition {
0% {
background-position: 0 0;
}
100% {
background-position: calc(100px * -1) 0;
}
}
@keyframes stripeBackgroundPosition {
0% {
background-position: 0 0;
}
100% {
background-position: calc(100px * -1) 0;
}
}


@media screen and (max-width: 768px){
.stripe_inner{
font-size: 4rem;
}
}

@media screen and (min-width: 769px) and (max-width: 1023px){
.stripe_inner{
font-size: 6rem;
}
}

@media screen and (min-width: 1024px) and (max-width: 1215px){
.stripe_inner{
font-size: 7rem;
}
}

@media screen and (min-width: 1216px) and (max-width: 1407px){
.stripe_inner{
font-size: 8rem;
}
}