在CSS/Jquery中創建漸變網格

Question

我不確定這是否可行，但我可以使用CSS/Jquery技術創建漸變網格嗎？ 類似的東西

我想隨機生成這個網格，然後可能動畫它，所以我試圖避免使用圖像。我不確定這樣的事情是否可能。

我在想也許是創建幾個單獨的漸變層，然後將它們全部疊加到一個固定的位置並更改它們的不透明度設置？

Answer 1

目前

幾年前，我使用SVG，HTML5 canvas標籤以及最近的CSS3漸變，嘗試了一些沿着這些線條的東西。我不相信目前有一種超越簡單線性或徑向梯度的自然方法。

問題是如果只能使用簡單的線性和徑向漸變（這是唯一可用的工具）模擬網格漸變。

不幸的是，當您使用不透明度或RGB組合多個漸變時，不同漸變色的顏色傾向於以無用的方式組合，導致顏色變淡。避免這種情況需要能夠在瀏覽器中將其渲染爲單個複合漸變。

漸變可以具有的形狀也有很大的侷限性 - 任意角度的線性漸變和徑向對稱的橢圓漸變。既不允許自由形式，也不允許形狀不規則。可應用於最終圖像的2D變換本質上也是相當規則的（縮放，傾斜等）。

今後

最有前途的選擇，我知道在不久的將來是在SVG 2.0網格漸變（也許擴散曲線以及）可能的支持。如果這確實發生了並且最終得到瀏覽器的支持，那應該開始大大擴展選項。之後不久，HTML5畫布標籤和CSS3可能會出現。

而作爲@vals在下面的評論中指出，WebGL的應該提供一些非常有前途的選項（HTML5畫布標記使用3D上下文）。

相關鏈接

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

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類背景的直鏈，inclinated 5度，並在RGBA格式指定的顏色，以允許透明度。

然後，爲了能夠覆蓋更多的漸變，我指定爲前後的僞元素，共享相同的佈局屬性。

對於after元素，我給出了一個圓形漸變，與mesh2共享 對於before元素，我給出了一個橢圓漸變，偏離中心。 所有這些都可以是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%);} 

我利用一切格爲網格的地方貢獻者，只得到「接觸」的inmediate鄰居，和去一個完全透明超越這一點。

結果是這樣的：

fiddle

的2種第一顏色都是紅色的作爲測試。在一個完美的系統中，連接2個點的線始終應該是完美的紅色。

這是真的，這不是一個完美的結果，但該結果的「污濁」或「washyness」或多或少是避免