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

canvas噪点悬浮动画效果

代码语言：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"&.........完整代码请登录后点击上方下载按钮下载查看