Question

我不确定这是否可行，但是我可以使用CSS / Jquery技术来创建渐变网格吗？与此 enter image description here

类似的内容

我想随机生成这个网格，然后可能为它设置动画，所以我试图避免使用图像。我不确定这样的事情是否可行。

我在考虑创建几层单独的渐变，然后将它们一起分层到一个固定的位置并改变它们的不透明度设置？

Answer 1

目前

几年前，我使用SVG，HTML5画布标签以及最近的CSS3渐变来尝试这些方面的内容。我不相信目前有一种超越简单线性或径向渐变的自然方法。

问题是如果只使用简单的线性和径向渐变（这是唯一可用的工具）可以模拟网格渐变。

不幸的是，当您使用不透明度或rgba组合多个渐变时，不同渐变的颜色倾向于以无用的方式组合，从而导致褪色。避免这种情况需要能够在浏览器中将其作为单个复杂渐变进行渲染。

梯度可以具有显着的局限性 - 任意角度的线性渐变和径向对称的椭圆梯度。也不允许自由形状的不规则形状。可以应用于结果图像的2D变换本质上也是相当规则的（缩放，倾斜等）。

将来

我不知道在不久的将来最有希望的选择是可能支持SVG 2.0中的网格渐变（也可能是扩散曲线）。如果确实发生了这种情况并且最终得到浏览器的支持，那么应该开始大大扩展选项。之后很快就会出现HTML5 canvas标签和CSS3。

正如@vals在下面的评论中指出的那样，WebGL应该提供一些非常有前景的选项（对于使用3D上下文的HTML5画布标签）。

相关链接

Answer 2

我做了一个简单的布局来说明这一点。

首先，我将放置4个div，第一个显示部分结果，最后一个显示最终结果。标记只是：

<div class="box mesh1"></div>
<div class="box mesh2"></div>
<div class="box mesh3"></div> 
<div class="box mesh"></div>

此处框仅适用于尺寸，mesh1至3保持部分结果，在网格中我们将它们全部放在一起。

CSS是：

.box {
    width: 400px;
    height: 150px;
    position: relative;
    display: inline-block;
}

.mesh1, .mesh {
background:
    -webkit-linear-gradient(5deg,  rgba(0, 250, 0, 0.5), rgba(0, 100, 0, 0.5))
}

.mesh:after, .mesh:before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 0px;
    right: 0px;
}
.mesh2, .mesh:after {
background:   -webkit-radial-gradient(center center, circle cover, rgba(250, 0, 0, 0.6) 0%, rgba(120, 0, 10, 0.5) 100%);}

.mesh3, .mesh:before {
background: -webkit-radial-gradient(10% 10%, ellipse cover, rgba(0, 0, 250, 0.6) 0%, white 100%);}

我给mesh1类一个线性背景，倾斜5度，并指定rgba格式的颜色以保证透明度。

然后，为了能够覆盖更多渐变，我指定了之前和之后的伪元素，共享相同的布局属性。

对于after元素，我给出了一个与mesh2共享的循环渐变对于前面的元素，我给出了一个椭圆渐变，偏离中心。所有这些都可以是rgba。

最后，你会在网格div中看到重叠所有内容的结果

（我已经在任何地方都使用了webkit表示法来缩短它）

我不会说这很有艺术性，但我把这部分留给你： - ）

fiddle here

Answer 3

在我的第一个答案中，我认为这更像是以“艺术”方式而不是“数学”方式。 Matt Coughlin的答案让我想到了一个更加数学化的答案，我们会使这个要求的“网格”部分变得更加严谨。

也就是说，我们有一个颜色矩阵，我们想在网格中显示它。如果网格的间距为100px，则矩阵的颜色[x] [y]将以100x和100y的形式给予像素。中间的像素将以双线性方式近似。

对于这种方法，css将是：

.mesh { overflow: hidden; position: absolute;   width: 300px;   height: 300px;    }

.tile {    width: 200px;    height: 200px;    position: absolute;    display: block;   }

.tile11, .tile21, .tile31 {
left: -50px;
}
.tile12, .tile22, .tile32 {
left: 50px;
}
.tile13, .tile23, .tile33 {
left: 150px;
}
.tile11, .tile12, .tile13 {
top: -50px;
}
.tile21, .tile22, .tile23 {
    top: 50px;
}
.tile31, .tile32, .tile33 {
top: 150px;
}

.tile11 {
background: -webkit-radial-gradient(center center, 100px 100px, 
      rgba(255, 0, 0, 1) 0%, 
      rgba(255, 0, 0, 0.5) 50%,
      rgba(255, 0, 0, 0) 100%);}

.tile12 {
background: -webkit-radial-gradient(center center, 100px 100px, 
      rgba(255, 0, 0, 1) 0%, 
      rgba(255, 0, 0, 0.5) 50%,
      rgba(255, 0, 0, 0) 100%);}

我使用每个div作为网格的局部贡献者，只是“触摸”中间邻居，并在此之后达到完全透明。

结果如下：

fiddle

2种第一种颜色都是红色的测试。在一个完美的系统中，连接2个点的线应始终是完美的红色。

确实，这不是一个完美的结果，但结果的“混乱”或“淡态”或多或少地被避免了

Answer 4

我写了一个有关使用栅格图像创建轻量级，可缩放网格渐变的解决方案的方法：https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

它不能解决您想要随机生成它们的问题，但至少可以为您提供CSS或SVG解决方案所期望的小文件大小和与分辨率无关的缩放比例。

在CSS / Jquery中创建渐变网格

4 个答案: