You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xshop/resources/views/segments/footer/WaveFooter/WaveFooter.scss

51 lines
1.0 KiB
SCSS

.WaveFooter {
margin-top: 3rem;
min-height: 300px;
position: relative;
.waves {
>use {
fill: var(--xshop-primary);
animation: move-forever var(--speed) -2s linear infinite;
&:nth-child(2) {
animation-delay: -3s;
animation-duration: var(--speed2);
}
&:nth-child(3) {
animation-delay: -4s;
animation-duration: var(--speed3);
}
}
}
svg {
position: absolute;
left: 0;
bottom: 5rem;
width: 100%;
height: 30vw;
max-height: 200px;
}
.content{
padding: 1rem;
background: var(--xshop-primary);
opacity: .96;
color: var(--xshop-diff);
height: 5rem;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
}
@keyframes move-forever {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}