15

我不确定这是否可能，但我可以使用 CSS/Jquery 技术来创建渐变网格吗？类似的东西在此处输入图像描述

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

我在想也许可以创建几层单独的渐变，然后将它们全部分层到一个固定位置并更改它们的不透明度设置？

4

4 回答 4

8

现在

几年前，我使用 SVG、HTML5 画布标签和最近的 CSS3 渐变，尝试了一些类似的东西。我不相信目前有一种自然的方法可以超越简单的线性或径向渐变。

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

不幸的是，当您使用 opacity 或 rgba 组合多个渐变时，不同渐变的颜色往往会以一种无用的方式组合，从而导致颜色褪色。避免这种情况需要能够在浏览器中将其呈现为单个复杂渐变。

渐变可以具有的形状也有很大的限制——任意角度的线性渐变和径向对称的椭圆渐变。两者都不允许自由形式的不规则形状。可应用于结果图像的 2D 变换在本质上也相当规则（缩放、倾斜等）。

在将来

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

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

相关链接

于 2013-02-18T20:59:03.983 回答
7

我做了一个简单的布局来演示这一点。

首先我放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 格式指定颜色以允许透明度。

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

对于后元素，我给出一个圆形渐变，与 mesh2 共享。对于前元素，我给出一个椭圆渐变，偏离中心。他们都可以是rgba。

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

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

我不会说它很有艺术性，但我把这部分留给你:-)

在这里摆弄

于 2013-02-18T20:04:02.690 回答
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 用作网格的本地贡献者，仅“触摸”中间邻居，并在此之后达到完全透明。

结果是这样的：

小提琴

作为测试，前两种颜色都是红色。在一个完美的系统中，连接 2 个点的线应该一直是完美的红色。

确实不是完美的结果，但或多或​​少避免了结果的“浑浊”或“水洗”

于 2013-02-24T11:36:51.840 回答
2

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

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

于 2019-01-18T20:22:55.557 回答