使用线性渐变实现类迷宫图形

# 使用线性渐变实现类迷宫图形

使用线性渐变实现类迷宫图形。

随机的艺术。

HTML：

div.g-grid
    - for(var i=0; i<400; i++)
        div.g-box

SCSS：

$count: 400;

@function randomRotate() {
    $r: random(100);
    @if $r > 50 { @return 45  }
    @if $r <= 50      { @return -45 }
}

.g-grid {
    width: 100vmin;
    height: 100vmin;
    margin: 0 auto;
    display: grid;
    grid-template-columns:  repeat(20, 5%);
    grid-template-rows: repeat(20, 5%);
}

@for $i from 1 to $count + 1 {
    .g-box:nth-child(#{$i}) {
        background: linear-gradient(#{randomRotate()}deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
    }
}

效果如下：

阅读全文