在CSS/Jquery中创建渐变网格

Question

我不确定这是否可行,但是我可以使用CSS/Jquery技术来创建渐变网格吗？类似的东西

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

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

Answer 1

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

首先，我会放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 共享。对于 before 元素，我给出了一个偏离中心的椭圆渐变。所有这些都可以是rgba。

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

（我到处都使用了 webkit 符号来简化它）

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

在这里摆弄

Answer 2

现在

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

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

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

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

在将来

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

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

相关链接

• http://www.svgopen.org/2011/papers/18-Advanced_Gradients_for_SVG/
• http://w3-org.9356.n7.nabble.com/Diffusion-Curves-td146288.html