jquery实现一个canvas三角形重叠动态背景效果代码-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：jquery实现一个canvas三角形重叠动态背景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
          font-family: "helvetica", sans-serif;
        }
        
        .hero {
          background-color: #EEEEEE;
          width: 100%;
          height: 100%;
          max-height: calc(100% - 50px);
        }
        .hero .inner {
          position: relative;
          max-width: 960px;
          height: 100%;
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 40px;
          box-sizing: padding-box;
          z-index: 4;
        }
        .hero .inner h1 {
          color: rgba(163, 32, 109, 0.6);
          font-weight: 300;
          text-transform: uppercase;
          margin-bottom: 0;
          border-bottom: 2px rgba(163, 32, 109, 0.6) dashed;
        }
        .hero .inner p {
          color: #999999;
          margin-bottom: 0;
          font-size: 13px;
          line-height: 150%;
          max-width: 550px;
        }
        .hero .inner p.small {
          font-size: 12px;
        }
        .hero .inner p a {
          display: inline-block;
          font-size: 22px;
          color: rgba(163, 32, 109, 0.4);
          margin: 0 10px;
          transform: rotateY(0deg);
          transition: transform 0.2s ease-in-out, color 0.2s linear;
        }
        .hero .inner p a:hover {
          color: rgba(163, 32, 109, 0.8);
          transform: rotateY(360deg);
          transition: transform 0.6s ease-in-out, color 0.4s linear;
        }
        .hero .overlay {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: transparent;
          background: linear-gradient(to bottom, rgba(114, 81, 109, 0.2) 0%, #eeeeee 100%);
          z-index: 3;
        }
        .hero .background {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-color: #EEEEEE;
          z-index: 1;
        }
        .hero .background #hero-canvas {
          width: 100%;
          height: 100%;
          position: relative;
        }
        
        .suppoprt-me {
          display: inline-block;
          position: fixed;
          bottom: 10px;
          left: 10px;
          width: 20vw;
          max-width: 250px;
          min-width: 200px;
          z-index: 9;
        }
        .suppoprt-me img {
          width: 100%;
          height: auto;
        }
    </style>

    <script>
        window.console = window.console || function(t) {};
    </script>



    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
          }
    </script>


</head>

<body>
    <div class="container hero">
        <div class="inner">
            <h1>
                TITLE
            </h1>
            <p>
                Quick animation prototype to explore an idea for the hero of my personal portfolio.</br>
                This was created using a canvas as a background where the triangles are drawn and animates with a overlay gradient on top of the canvas.
            </p>
            <p>
                Feel free to share and use it as inspiration for any of you projects, and if you like it show some love by following me on:
            </p>
            <p>
                <span><a href="https://dribbble.com/MDesignsuk"><i class="fa fa-dribbble" aria-hidden="true"></i></a></span>
                <span><a href="https://twitter.com/MDesignsuk" target="_blank"><i class="fa fa-twitter"></i></a></span>
                <span><a href="https://github.com/Mario-Duarte/" target="_blank"><i class="fa fa-github"></i></a></span>
                <span><a href="https://bitbucket.org/Mario_Duarte/" target="_blank"><i class="fa fa-bitbucket"></i></a></span>
                <span><a href="https://codepen.io/MarioDesigns/" target="_blank"><i class="fa fa-codepen"></i></a></span>
            </p>
            <p class="small">by: Mario Duarte</p>
        </div>
        <div class="overlay"></div>
        <div class="background">
            <canvas id="hero-canvas" width="1920" height="1080"></canvas>
        </div>
    </div>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        let ww = $(window).width();
        let wh = $(window).height();
        
        // pure javascrip random function ============
        function random(min, max) {
          return Math.random() * (max - min) + min;
        }
        
        window.requestAnimFrame = function () {
          return window.requestAnimationFrame ||
          function (callback, element) {
            window.setTimeout(callback, 1000 / 60);
          };
        }();
        
        function init() {} //end init
        
        function .........完整代码请登录后点击上方下载按钮下载查看