Как сделать волну css
Как сделать переходы между разделами на сайте в виде волны?
В этой статье мы рассмотрим, как используя CSS и векторную SVG графику визуально оформить разрыв между секциями страницы в виде плавно изогнутой кривой линии.
После создания SVG, рассмотрим несколько примеров его применения для оформления границы блока.
Создание SVG изображения в форме волны
Пример готовой волны, выполненной с использованием кривых Безье в Inkscape.
После того как нужный контур будет готов документ Inkscape необходимо сохранить в SVG файл предварительно подогнав размер страницы под изображение.
При желании вы также можете оптимизировать полученное изображение, например, воспользовавшись сервисом SVGOMG.
В завершении вам необходимо открыть полученный SVG файл и скопировать его код себе на страницу.
Генерирование SVG волны с помощью сервиса getwaves.io
Если вам не нужна волна строго определённой формы, то в этом случае её можно сгенерировать через сервис getwaves.io. Он позволяет очень просто создавать плавные уникальные SVG волны. Генерирование случайной SVG картинки осуществляется посредством нажатия на кнопку с изображением кубика.
После того как вы подобрали волне нужную форму, её необходимо получить. Осуществляется это посредством нажатия на значок «Загрузка». Здесь сервис предлагает на выбор два варианта: скачать SVG файл или скопировать код. Т.к. изображение мы будем непосредственно размещать в HTML коде, то сделаем это через 2 вариант.
Примеры использования SVG волны для оформления перехода между секциями
1. Использование SVG волны для оформления нижней границы элемента.
В этом примере мы достигли данный эффект следующим образом:
2. Создание перехода с использованием нескольких волн.
3. Пример, в котором волне добавлена анимация с помощью CSS
Эффект бегущей волны на чистом CSS
Мне очень нравится этот способ создания бегущей волны для последующей ее анимации. Почему? Здесь мы не используем никакой графики, только свойства CSS. А если нет http-запроса, то можно рассчитывать на быструю отработку анимации.
Создание рамок для волны
Бегущая волна двигается внутри жестко заданных рамок. Создадим блок div с классом wavy, разместим его в центре страницы и временно окрасим бокс в белый цвет.
* <
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*не учитывать рамки*/
>
body <
display: flex;/*флексовый контейнер*/
justify-content: center;/*горизонтальное центрирование*/
align-items: center;/*вертикальное центрирование*/
min-height: 100vh;/*на всю высоту экрана*/
background: #222;/*цвет фона*/
>
.wavy <
position: relative;/*относительное позиционирование*/
width: 200px;/*ширина бокса*/
height: 50px;/*высота бокса*/
background: white;
overflow: hidden;/*переполненность скрыть*/
z-index: 1;/*на верхний слой*/
>
Создание волны
Меняем черный цвет текста на прозрачный.
Анимация волны
Создадим бесконечное, горизонтальное, линейное движение волны внутри белой рамки. Затем поменяем белый цвет на цвет фона. Белый цвет был нужен только в обучающих целях для наглядности.
@keyframes animate <
0%
<
transform: translateX(-1px);
>
100%
<
transform: translateX(-57px);
>
>
.wavy <
position: relative;
width: 250px;
height: 50px;
background: #222;
overflow: hidden;
z-index: 1;
>
Посмотрите пример на CodePen
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Разделительная линия в виде волны на css
Продолжаем творить трюки на чистом css. Сегодня я расскажу, как на средствами css сделать красивую разделительную линию в виде волны на сайте. Ее можно использовать, например, для визуального разделения постов на блоге, или отдельных блоков в сайдбаре.
Когда-то я уже рассказывал о стильной разделительной линии на css. Но там применялся тег-динозавр hr с парочкой хитрых правил в стилях, позволявших поиграться с тенью.
Сегодня же совсем иной расклад. Для отображения линии в виде волны придется добавить в правила гораздо больше хитростей и применять уже не просто css, а css3. Вэлкам!
Для начала обычный html код. Линии мы будем выводить пустыми блоками div со специальными наборами правил. Пустые блоки — это, конечно же, зло. Но иногда приходится с ним мириться.
Здесь мы показали 4 вида линий. А вот так будет выглядеть набор стилей в css для них:
Здесь мы использовали такие фишки как linear-gradient и radial-gradient из арсенала css3.
Есть и другой вариант применения разделительной линии в виде волны (самая нижняя на иллюстрации в начале поста). Ее можно применять в конце какого-либо блока, как нижнее оформление. Код достаточно прост. Сначала html:
В правилах css применим псевдоэлементы :before и :after. О них вы можете прочитать здесь. Вот как будет выглядеть код:
Эффект волны на CSS
Эффект волны на CSS
Анимация на CSS способна преобразить страницу и задержать внимание пользователя эффектной подачей. Предлагаю потренироваться и создать CSS анимацию, имитирующую эффект волны! Приготовление этой «вкусняшки» из мира веб-строительства займет совсем немного времени: около 10-15 минут. А принцип, лежащий в основе её создания, позволит воплотить в жизнь фантазии дизайнеров о развевающихся на ветру вуалях, флагах и прочих элементах прекрасного. Итак, не будем больше тратить время на описательную базу, приступим к конкретике.
Цель: имитировать движение волн посредством анимации на CSS. В результате должны получиться два анимированных блока, представленных в начале статьи.
Инструменты: HTML, CSS
Основной принцип заключается в бесконечном процессе поворота скругленных блоков на 360 градусов. Каждый из скругленных блоков окрашен в цвет волны и является дочерним по отношению к фоновому блоку. Из-за того, что область видимости родительского блока ограничена свойством overflow: hidden, пользователь видит лишь отдельные сегменты вращающихся скругленных блоков. Благодаря этому создается имитация набегающих волн.
Создаем волны в квадратном блоке
Следуя описанному выше принципу, в html-файле создадим блок для «хранения» с классом «waves». В созданном блоке расположим 2 дочерних блока с классами «wave1» и «wave2»:
Теперь откроем CSS файл и добавим стили для фонового блока с классом «waves»: размеры, относительное позиционирование, цвет фона и тень.
Позже мы вернемся к селектору «.waves», чтобы дополнить список свойств значением overflow: hidden. А пока я предлагаю не сокращать область наблюдения за создаваемыми блоками, чтобы насладиться обзором всех частей анимации.
Приступим к стилизации селекторов «.wave1» и «.wave2»:
1. Увеличим эти блоки относительно фонового до 200% и зададим им абсолютное позиционирование:
2. Определим расположение блоков. Затем окрасим и закруглим их. После этого каждому блоку зададим анимацию «wave» с разной периодичностью:
Пришло время добавить динамики нашим блокам! Для этого в CSS-файле мы опишем анимацию «wave» — за одну итерацию анимированный элемент будет поворачиваться на 360 градусов:
На этом этапе остановимся и посмотрим в браузере, что получилось:
Это наглядная демонстрация принципа создания эффекта волн в CSS: мы видим, что закругленные блоки действительно способны имитировать движение волн, но только на ограниченной области обзора. Поэтому сейчас самое время вернуться к редактированию селектора «.waves» и добавить CSS-свойство overflow:hidden:
Действительно, сейчас наши блоки больше похожи на волны. Поставленной цели мы достигли! Самое время пофантазировать и преобразовать наш код для получения другого интересного результата.
Создаем волны в круглом вращающемся блоке
Давайте внесем небольшие изменения в наши файлы с кодом и заключим волны не в квадрат, а в круг. Да не в простой, а с вращающимся волнистым бочком! Такой прием эффектно смотрится на темном фоне. Поэтому эксперимента ради закрасим элемент разметки, в котором будет располагаться круглый в темно-синий цвет. Так как под этот эксперимент я выделила целую страницу, то окрашу в темно-синий цвет body:
Так как в данном примере движутся не только синие волны, но и белый фон, то предлагаю в html-файл добавить дополнительный блок с классом «wave0». Позже мы окрасим этот блок в белый цвет и зададим ему вращение:
Для селекторов «.wave1» и «.wave2» стили останутся прежними. Нужно внести небольшие корректировки в список свойств для селектора «.waves», а также добавить свойства для вновь созданного блока с классом «wave0». Ниже я размещу весь код CSS-файла с внесенными изменениями. В союзе с предоставленным выше html-кодом, этот код будет создавать вращающийся круг с эффектом набегающих волн. Копируйте код и проверяйте работоспособность в браузере!
Таким образом, описанный выше принцип создания анимации в CSS можно использовать не только для создания эффекта движущихся волн, но и после небольших модификаций преобразовать, например в развевающийся на ветру флаг. Однако, об этом я расскажу в одной из следующих статей.
Форма границы в виде волны на CSS3
Я не смог реализовать границу и установить цвет фона на форму волны.
Мне необходимо получить результат, как на картинке ниже:
1 ответ 1
CSS +SVG решение
Вы также можете получить форму другим способом.
Немного более интересней
А как насчёт реальной формы волны?
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css css3 svg или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.22.41046
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.