Как создать волновое изображение в HTML?

На чтение 4 мин Просмотров 235 Опубликовано 14.08.2021

Волны — это простые дизайны, которые можно создать на HTML-странице, что улучшает общий вид веб-сайта и делает его более привлекательным и дизайнерским. Эти волны можно использовать при разработке фона целевых страниц, изображений, адаптивных кнопок, продуктов и областей веб-страниц с помощью CSS и HTML. Это может быть статическая волна или анимированная волна, относящаяся к предпочтениям.

Волны можно создать двумя способами:

использование селектора :: beforeи :: after
используя метод SVG.

Плюсы и минусы: :: Перед и :: после селектор метода просит точное местоположение пиксельного и таким образом мы получаем динамические волны и модель волны сдержите получить изменились. Принимая во внимание, что SVG — это наиболее оптимизированный способ отображения волн на веб-странице. Он быстро создает однородные волнистые узоры для веб-сайтов.

HTML-код. В следующем примере показано, как создать волну SVG.

HTML

<!DOCTYPE html>

<html>



<head>

    <style>

        body {

            overflow: hidden;

        }

        svg {

            display: inline-block;

            position: absolute;

            top: 0;

            left:0;

            z-index: -1;

        }

        .container {

            display: inline-block;

            position: absolute;

            width: 100%;

            padding-bottom: 100%;

            vertical-align: middle;

            overflow: hidden;

            top: 0;

            left: 0;

        }

        }

    </style>

</head>

<body style="text-align:center;">

    <h1 style="color:lawngreen;">

       bestprogrammer

    </h1>



    <div class="container">



        

        <svg viewBox="0 0 500 500"

            preserveAspectRatio="xMinYMin meet">



            <path d="M0, 100 C150, 200 350,

                0 500, 100 L500, 00 L0, 0 Z"

                style="stroke:none; fill:purple;">

            </path>

        </svg>

    </div>

</body>

</html>

Выход:

Читайте также: Cуть протокола HTTP