d3实现像素点绘制艺术图片生产单个div和css代码-html代码-BFW代码库

d3实现像素点绘制艺术图片生产单个div和css代码

代码语言：html

所属分类：其他

代码描述：d3实现像素点绘制艺术图片生产单个div和css代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
        box-sizing: border-box;
}

body {
        --space: clamp(1rem, 2vw, 2.5rem);
        --shadow: 0.6rem 0.6rem 0;
        font-family: 'VT323', monospace;
        font-size: 1.2rem;
        margin: 0;
        padding: calc(var(--space) * 2) var(--space);
        background: lightblue;
        accent-color: turquoise;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
}

button {
        font-family: inherit;
        font-size: inherit;
        background: orchid;
        border: 0.22rem solid;
        border-radius: 0.3rem;
        padding: 0.2rem 1rem;
        box-shadow: 0.2rem 0.2rem 0;
}

button:hover,
button:focus-visible {
        background: orange;
}

input[type="color"] {
        border: 0.22rem solid;
        border-radius: 0.3rem;
        box-shadow: 0.2rem 0.2rem 0;
        margin-right: 2rem;
}

h1 {
        font-family: 'Press Start 2P', cursive;
        font-weight: 400;
        margin: 0 0 var(--space);
        text-shadow: 0.1em 0.1em 0 orange;
}

p {
        margin: 0;
}

header {
        outline: 0.3rem solid;
        padding: var(--space);
        margin-bottom: calc(var(--space) * 2);
        box-shadow: var(--shadow);
        background: peachpuff;
}

.wrapper {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
}

@media (min-width: 70em) {
        .wrapper {
                max-width: 1200px;
                display: grid;
                grid-template-columns: 2fr 1fr;
                gap: 0 2rem;
        }
}

.controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        margin-bottom: calc(var(--space) * 1.5);
        grid-column: 1;
}

.canvas {
        --sizeX: var(--cellSizeCol, calc(100% / var(--colCount, 40)));
        --sizeY: var(--cellSizeRow, calc(100% / var(--rowCount, 30)));
        
        grid-column: 1;
        position: relative;
        outline: 0.3rem solid;
        box-shadow: var(--shadow);
        margin-bottom: calc(var(--space) * 2);
        background: linear-gradient(to right, transparent calc(100% - 1px), lightgrey 0),
                linear-gradient(to bottom, transparent calc(100% - 1px), lightgrey 0), white;
        background-size: var(--sizeX) 100%, 100% var(--sizeY);
}

.draw-area {
        position: relative;
        aspect-ratio: 4 / 3;
        background-repeat: no-repeat;
        background-size: var(--sizeX) var(--sizeY);
}

.marker {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: linear-gradient(to right, var(--bg, black), var(--bg, black));
        aspect-ratio: 1;
        background-size: var(--sizeX) var(--sizeY);
        background-repeat: no-repeat;
        opacity: 0;
}

.css label {
        display: block;
}

textarea {
        display: block;
        width: 100%;
        border: 0.3rem 0.3rem 0;
        box-shadow: var(--shadow);
        margin-bottom: var(--space);
        padding: 0 1rem;
}

[data-undo] {
        background: orange;
}
</style>




</head>

<body >
  <div class="wrapper">
        <header>
                <h1>Pixel Art Studio</h1>
                <p>Make your own single-div pixel art with CSS.</p>
        </header>
        <div class="con.........完整代码请登录后点击上方下载按钮下载查看