canvas噪点悬浮动画效果-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：canvas噪点悬浮动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
@import url("https://fonts.googleapis.com/css2?family=Red+Rose:wght@400;700&display=swap");
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            height: 100vh;
            display: grid;
            place-items: center;
            background: #161616;
        }

        main {
            width: 100%;
            height: 100%;
            display: grid;
            place-items: center;
            padding: 4rem;
        }

        .cards {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .cards .card {
            position: relative;
            width: 260px;
            height: 360px;
            margin: 2rem 4rem;
        }
        .cards .card__image {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .cards .card__image--inner {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .cards .card__image--inner canvas {
            transform: scale(1.02);
        }
        .cards .card__text {
            position: absolute;
            left: 0;
            bottom: 25%;
            transform: translateX(-50%);
            pointer-events: none;
            user-select: none;
            overflow: hidden;
        }
        .cards .card__text--inner {
            display: inline-block;
            color: #fff;
            font-size: 3rem;
            font-family: "Red Rose", Roboto;
            font-weight: 700;
        }

        .loading__wrapper {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #000;
            z-index: 200;
            transition: opacity 500ms ease-in;
        }
        .loading__wrapper .loader__text {
            color: #fff;
            font-family: "Red Rose", Roboto;
            font-weight: 400;
            margin-bottom: 1.4rem;
        }
        .loading__wrapper.hide {
            pointer-events: none;
            user-select: none;
            opacity: 0;
        }

        .support {
            position: fixed;
            right: 10px;
            bottom: 10px;
            padding: 10px;
            display: flex;
        }
        .support a {
            margin: 0 10px;
            color: #fff;
            font-size: 1.8rem;
            backface-visibility: hidden;
            transition: all 150ms ease;
        }
        .support a:hover {
            transform: scale(1.1);
        }

        .github-corner {
            position: fixed;
            right: 0;
            top: 0;
        }
        .github-corner svg {
            color: #353;
            fill: #fff;
            clip-path: polygon(0 0, 100% 0, 100% 100%);
        }
        .github-corner:hover .octo-arm {
            animation: octocat-wave 0.56s;
        }

@keyframes octocat-wave {
            0%,
            100% {
                transform: rotate(0);
            }
            20%,
            60% {
                transform: rotate(-20deg);
            }
            40%,
            80% {
                transform: rotate(10deg);
            }
        }
    </style>

</head>
<body translate="no">
    <main>
        <div class="cards">
            <div class="card">
                <div class="card__image">
                    <div class="card__image--inner"></div>
                </div>
                <div class="card__text">
                    <span class="card__text--inner">DESERT</span>
                </div>
            </div>
          
        </div>
    </main>
    <div class="loading__wrapper">
        <div class="loader__text">
            Loading...
        </div>
    </div>
    <div class="support">
        <a href="" target="_blank"><i class="fab fa-twitter-square"></i></a>
        <a href="" target="_blank"><i class="fab fa-dribbble"></i></a>
    </div>

    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
    <script>
        // this might look cluttery on codepen, you can check the repo (below)
        // GITHUB LINK --> https://github.com/devloop01/canvas-image-interaction

        // I added comments just in case you are exploring through the code.

        // ALL THE CARD OPTIONS LISTED BELOW -->
        // 1. jumpToRandomPosition: If `true` the particles on every frame will jump to random position. Else the particles will move randomly without jumping. Defaults to `false`
        // 2. growAndShrink: If `true` the particles will grow & shrink, it will grow .8 times larger than the radius. Defaults to `false`
        // 3. fill: If `true` the particles are filled with the current pixel color that they are on, else they will be stroked for that same color. Defaults to `true`
        // 4. bounceFromEdges: If `true` the particles will bounce back when they hit the (specified) edges, or else thay will continue their path from the opposite edges/walls. Defaults to `true`.
        // 5. shape: You can specify what shape of the particles. Currently you can specify any one from the following, i.e. "circle", "square", "hexagon". If not specified then it defaults to "circle"
        // 6. radius: You can specity the radius of the particles, defaults to "5" if not specified.
        // 7. randomRadius: If `true` then the particles will have random radius, else defaul.........完整代码请登录后点击上方下载按钮下载查看