html and css

<!doctype html>
<html lang="en">
<head>
 
  <title>oka</title>
  <style>
     
body {
    color: #191919;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: .9375rem;
    margin: 0;
    padding: 0;
}
 
 

.background {
    bottom: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: -2;
}

 
.background-image {
    background-repeat: no-repeat;
    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.8));
    background-size: cover;
    background-position: 50%;
    height: 100vh;
    overflow: hidden;
    width: 100%;
    background-attachment: fixed;
}

 
 
 
.flip-x {
    transform: scaleY(-1);
}

 
 
.wave {
    z-index: 1 !important;
}
 
.work {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 0;
    z-index: -1;
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
}
        h1{
            margin: 0 auto;
            text-align: center;
            font-size: 40px;
            font-weight: 400;
        }
  
        .row{
            max-width: 1140px;
            margin: 0 auto;
        }
        
        p{
            font-size: 18px;
            line-height: 36px;
        }
    </style>

</head>
<body>
            
        <header class="full" style="height: 2000px;">             
            <div  class="background">
                <svg class="work flip-x" width="100%" height="100%">
                    <defs></defs>
                    <path id="wave-1" d="" data-wave-color="#fff" data-wave-height=".3" data-wave-bones="4" data-wave-speed="0.5"/>
                </svg>
                <svg class="work wave" width="100%" height="100%">
                    <defs></defs>
                    <path class="dyna" id="wave-2" d="" data-wave-color="#fff" data-wave-height=".3" data-wave-bones="6" data-wave-speed="0.3"/>
                </svg>
                <div class="background-image" data-bg-image="portrait-city-men-autumn-happiness-fashion-smiling-fall-lifestyle-man-person-urban-guy-happy-stylish_t20_29oOeP.jpg"></div>
            </div>
            
        </header>
        <section class="hora row">
            <h1 class="text-center">Animated Wavy Background</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate modi, omnis, at eaque tempore enim odio, eligendi placeat similique quos animi. Magni eos saepe atque, repellat, omnis cum rerum in explicabo, autem commodi reiciendis odio? Est praesentium sint dicta unde minus cupiditate impedit incidunt! At, iusto deserunt amet cumque earum quisquam, error tenetur ea? Eos eum, nulla vero odit culpa mollitia consequatur, cumque similique ducimus. Pariatur alias at porro ex velit vitae ut voluptatum voluptatem obcaecati autem modi, commodi nisi dolorum, laudantium nostrum necessitatibus explicabo quasi enim excepturi laborum officia nihil soluta quo corporis? Voluptate facere, nulla animi laudantium nobis ratione incidunt illum labore! Quas neque qui et rerum voluptate expedita ratione sapiente voluptatibus excepturi sed placeat ipsa doloremque, in nemo at id corrupti perferendis fuga libero illum laboriosam aut sequi explicabo. Perspiciatis amet labore beatae suscipit vitae tempore, explicabo impedit nisi quidem voluptate ipsam accusamus, praesentium perferendis, cum harum tenetur voluptates, quam tempora aliquam repellendus! Eveniet, accusantium autem totam beatae magni similique maiores placeat laborum expedita blanditiis. Numquam, mollitia provident vel sequi amet ipsum doloribus. Sint eveniet at eos necessitatibus suscipit nemo quod maxime dolores enim laborum eius, veritatis odio atque, temporibus blanditiis, iusto possimus incidunt quasi tempora in officia! Pariatur sunt quo saepe magnam placeat labore illum facilis quisquam, nisi ipsum consequuntur totam, porro repellat deserunt adipisci atque nesciunt voluptas suscipit quibusdam eligendi aut aspernatur. Consequuntur quibusdam deserunt incidunt magnam id, aliquid iste eos ratione nihil, itaque veritatis dolores, fugiat nemo nobis maxime praesentium laudantium. Culpa maxime officia architecto itaque sed, soluta sapiente labore, recusandae at ipsa a ratione deleniti quas officiis iusto reiciendis, id similique tenetur ut fugiat nobis atque dicta! Quisquam suscipit adipisci quis vel! Architecto consequatur nulla tempora quia, hic, perferendis at vitae voluptatem velit facilis nostrum optio dolorem non, suscipit laborum officiis, accusantium asperiores.
            </p>
        </section>
     
    <!--end page-->

    <script>
        if( document.getElementsByClassName("full").length ) {
            document.getElementsByClassName("full")[0].style.height = window.innerHeight + "px";
        }
    </script>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
    <script src="jquery.wavify.js"></script>
 <script>
    
     
$(document).ready(function($) {
    "use strict";  

    $("[data-bg-image]").each(function() {
        var $this = $(this);

        if( $this.hasClass() ){                       
        }
        else {             

            if( $this.attr("data-bg-image") !== undefined ){
                $this.css("background-image", "url("+ $this.attr("data-bg-image") +")" );  
            }
        }
    });

 

    $(".dyna").each(function(){
        $(this).wavify({             
            height: $(this).attr("data-wave-height"),
            bones: $(this).attr("data-wave-bones"),
            amplitude: .1 * $(window).height(),
            color: $(this).attr("data-wave-color"),
            speed: .15
        });
    });
 
});
 
 
 
    
    </script>

   
</body>
</html>

在线演示

让链接同时具备两种打开方式