js实现一幅动态艺术画作效果代码-html代码-BFW代码库

js实现一幅动态艺术画作效果代码

代码语言：html

代码描述：js实现一幅动态艺术画作效果代码

代码标签：艺术画

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
            --black: #000;
            --grey: #7D808A;
            --white: #fff;
            --clr1: #F29F05;
            --clr2: #73BFAA;
            --clr3: #6BB3F2;
            --clr4: #5B92D9;
            --clr5: #A60530;
        }
        
        *,
        *::after,
        *::before,
        html,
        body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            background: var(--grey);
            display: grid;
            height: 100vh;
            place-items: center;
        }
        
        #poster {
            background-color: var(--white);
            border: 2vmin solid var(--black);
            box-shadow: 0 4vmin 8vmin -4vmin;
            box-sizing: content-box;
            height: 80vmin;
            padding: 4vmin;
            width: 50vmin;
        }
        
        #canvas {
            background: var(--black);
            display: grid;
            height: 80vmin;
            overflow: hidden;
            position: relative;
            /* place-items: center; */
            width: 50vmin;
        }
        
        #canvas span {
            background-color: var(--black);
            border-radius: 0;
            height: 15vmin;
            position: absolute;
            transition: all .2s linear; 
            width: 15vmin;
        }
    </style>



</head>

<body>



    <script>
        let body, box, canvas, colors, poster, random;
        body = document.body;
        poster = document.createElement('div');
        poster.setAttribute('id', 'poster');
        body.prepend(poster);
        canvas = document.createElement('div');
        canvas.setAttribute('id', 'canvas');
        poster.prepend(canvas);
        box = 16;
        
        random = (min, max) => {
    .........完整代码请登录后点击上方下载按钮下载查看