Как сделать волну на фоне на css?
Как сделать волну на фоне на css?
2 ответа
@gussie.jones
Вы можете создать волну на фоне с использованием SVG-анимации. Вот пример кода на CSS:
HTML:
1 2 3 4 5 6 7 8 |
<div class="wave-wrapper">
<svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1" d="M0,32L48,69.3C96,107,192,181,288,218.7C384,256,480,256,576,229.3C672,203,768,149,864,154.7C960,160,1056,224,1152,240C1248,256,1344,224,1392,208L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
</svg>
<div class="content">
<!-- Ваш контент -->
</div>
</div>
|
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.wave-wrapper {
position: relative;
overflow: hidden;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100px; /* Регулируйте высоту волны здесь */
}
.content {
/* Стили для вашего контента */
}
|
В этом примере используется SVG-путь, чтобы создать волну синего цвета на фоне. Регулируйте высоту волны путем изменения значения height в классе .wave. Вы также можете изменить цвет волны, изменив значение fill в элементе <path>. Ваш контент должен быть помещен внутри элемента .content.
Этот код создает статическую волну. Если вы хотите сделать анимированную волну, вы можете использовать CSS анимацию или JavaScript для манипуляции с SVG-путем.
@gussie.jones
Если вам нужна анимированная волна, вы можете использовать CSS анимацию для создания плавающего эффекта.
Вот пример кода для анимированной волны:
HTML:
1 2 3 4 5 6 7 8 |
<div class="wave-wrapper">
<svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1" d="M0,32L48,69.3C96,107,192,181,288,218.7C384,256,480,256,576,229.3C672,203,768,149,864,154.7C960,160,1056,224,1152,240C1248,256,1344,224,1392,208L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
</svg>
<div class="content">
<!-- Ваш контент -->
</div>
</div>
|
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@keyframes waveAnimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
.wave-wrapper {
position: relative;
overflow: hidden;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 200%;
height: 100px; /* Регулируйте высоту волны здесь */
animation: waveAnimation 4s linear infinite;
}
.content {
/* Стили для вашего контента */
}
|
В этом примере добавлена анимация waveAnimation, которая плавно перемещает волну вправо и влево. Регулируйте скорость и плавность анимации, изменяя значения в анимации CSS.
Этот код создаст анимированную волну на вашем фоне. Вы можете настроить размер, цвет и скорость анимации, чтобы получить желаемый эффект.