jquery打造游戏人生效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：jquery打造游戏人生效果

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

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

    <style>
        body {
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
            background: #efefef;
            overflow: hidden;
        }
        body:before {
            content: 'drag your cursor to generate more cells';
            position: absolute;
            font-family: 'Futura', sans-serif;
            width: 100%;
            bottom: 20px;
            text-align: center;
        }
        body #wrapper {
            width: 600px;
            min-width: 600px;
            min-height: 600px;
            height: 600px;
            position: relative;
            background: #000;
            border-radius: 100%;
            display: grid;
            grid-template-columns: repeat(20, 1fr);
            grid-template-rows: repeat(20, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            cursor: pointer;
        }
        body #wrapper .row .cell {
            width: 30px;
            height: 30px;
            position: relative;
        }
        body #wrapper .row .cell:before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            left: -25%;
            top: -25%;
            background: var(--color);
            -webkit-transform: scale(0) rotate(0deg);
            transform: scale(0) rotate(0deg);
            -webkit-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out;
            border-radius: var(--border-radius);
            z-index: 2;
        }
        body #wrapper .row .cell:after {
            content: '';
            position: absolute;
            width: 400%;
            height: 400%;
            left: -125%;
            top: -125%;
            background: linear-gradient(45deg, transparent calc(50% - 1px), var(--color) calc(50% - 1px), var(--color) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), var(--color) calc(50% - 1px), var(--color) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(90deg, transparent calc(50% - 1px), var(--color) calc(50% - 1px), var(--color) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(0deg, transparent calc(50% - 1px), var(--color) calc(50% - 1px), var(--color) calc(50% + 1px), transparent calc(50% + 1px));
            -webkit-mask: radial-gradient(circle at center, transparent 20%, #000 20%, #000 22.5%, transparent 22.5%) 50% 50%/100% 100%;
            mask: radial-gradient(circle at center, transparent 20%, #000 20%, #000 22.5%, transparent 22.5%) 50% 50%/100% 100%;
            -webkit-transition: -webkit-mask0.3s ease-in-out, -webkit-transform 0s ease-in-out;
            transition: -webkit-mask0.3s ease-in-out, -webkit-transform 0s ease-in-out;
            transition: mask0.3s ease-in-out, transform 0s ease-in-out;
            transition: mask0.3s ease-in-out, transform 0s ease-in-out, -webkit-mask 0.3s ease-in-out, -webkit-transform 0s ease-in-out;
            z-index: 1;
            border-radius: 100%;
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        body #wrapper .row .cell.alive:before {
            -webkit-transform: scale(1) rotate(var(--rotate));
            transform: scale(1) rotate(var(--rotate));
            -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0s;
            transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0s;
        }
        body #wrapper .row .cell.alive:after {
            -webkit-mask: radial-gradient(circle at center, transparent 20%, #000 20%, #000 22.5%, transparent 22.5%) 50% 50%/500% 500%;
            mask: radial-gradient(circle at center, transparent 20%, #000 20%, #000 22.5%, transparent 22.5%) 50% 50%/500% 500%;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        body #wrapper .row .cell.alive.cell1:before, body #wrapper .row .cell.alive.cell1:after {
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
        }
        body #wrapper .row .cell.alive.cell2:before, body #wrapper .row .cell.alive.cell2:after {
            -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
        }
        body #wrapper .row .cell.alive.cell3:before, body #wrapper .row .cell.alive.cell3:after {
            -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
        }
        body #wrapper .row .cell.alive.cell4:before, body #wrapper .row .cell.alive.cell4:after {
            -webkit-transition-delay: 0.4s;
            transition-delay: 0.4s;
        }
        body #wrapper .row .cell.alive.cell5:before, body #wrapper .row .cell.alive.cell5:after {
            -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;
        }
        body #wrapper .row .cell.alive.cell1:before, body #wrapper .row .cell.alive.cell1:aftere {
            -webkit-transform: scale(0.75) rotate(var(--rotate));
            transform: scale(0.75) rotate(var(--rotate));
        }
        body #wrapper .row .cell.alive.cell2:before, body #wrapper .row .cell.alive.cell2:after {
            -webkit-transform: scale(1.25) rotate(var(--rotate));
            transform: scale(1.25) rotate(var(--rotate));
        }
        body #wrapper .row .cell.alive.cell3:before {
            -webkit-transform: scale(1) rotate(var(--rotate));
            transform: scale(1) rotate(var(--rotate));
            background: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--color)), color-stop(50%, var(--color2)));
            background: linear-gradient(toright, var(--color) 50%, var(--color2) 50%);
        }
        body #wrapper .row .cell.alive.cell4:before, body #wrapper .row .cell.alive.cell4:after {
            -webkit-transform: scale(0.5) rotate(var(--rotate));
            transform: scale(0.5) rotate(var(--rotate));
        }
        body #wrapper .row .cell.alive.cell5:before, body #wrapper .row .cell.alive.cell5:after {
            -webkit-transform: scale(0.35) rotate(var(--rotate));
            transform: scale(0.35) rotate(var(--rotate));
        }
    </style>

</head>
<body translate="no">
    <div id='wrapper'>
        <div class='row'>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>
            <div class='cell alive' data-state='alive'></div>.........完整代码请登录后点击上方下载按钮下载查看