FORGOT YOUR DETAILS?

前沿网页前端设计使用HTML CSS JS制作动画波浪背景cid1153前端源码下载

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>

 在线演示


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

获取源码: wavyy
下载数:91人次, 文件大小: 255.5 KB, 上传日期: 2021年-4月-30日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

1,639 人查阅

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
下载 (4)

您需要先支付 6元 才能查看此处内容!立即支付





 

TOP

获取源码,用于学习交流。记得 B站/点赞 /投币/转发 非常谢谢!

一键获取本站点所有源码