灰色爆發

這種迷人的灰色爆發效果雖然並不過於復雜，但卻提供了寶貴的學習機會。讓我們使用SVG探索其創建，重點關注關鍵技術。

SVG實施

利用SVG<line></line>元素（屬性x1 ， x2 ， y1 ， y2 ）簡化了突發設計。中心點（ x1 ， y1 ）保持恆定，而x2和y2是使用隨機數動態生成的。 viewBox="0 0 100 100"屬性使坐標計算直接。考慮使用viewBox="-50 -50 100 100"以將原點置於以更輕鬆的操作中。

隨機數生成

自定義功能在指定範圍內生成隨機整數：

 const getrandomint =（min，max）=> {
  min = math.ceil（min）;
  max = math.floor（max）;
  返回Math.floor（Math.random（） *（最大-min 1））最小值；
};

該功能證明對於控制線定位，中風寬度和不透明度是無價的，突出了對類似內置JavaScript數學助手的需求。

簡化的HTML生成

模板文字提供了一種干淨易讀的方法來動態生成SVG線：

讓新線；
for（讓i = 0; i <h3 id="點擊到重生的交互性">點擊到重生的交互性</h3><p>添加互動非常簡單。單個功能（ <code>doArt()</code> ）處理藝術品生成，事件偵聽器每次點擊都會觸發此功能：</p><pre class="brush:php;toolbar:false"> doart（）;
window.AddeventListener（“ click”，doart）;

通過四捨五入增強美學

使用stroke-linecap="round"可以通過四捨五入的終點來顯著提高視覺吸引力。

CSS轉換用於動畫

動畫效應是使用CSS變換來實現的，特別是scale() ，而不是直接更改線坐標。這會產生脈動效果：

線 {
  轉化原始：中心；
  動畫：做4S無限替代；
}
/ * ...動畫延遲... */

@keyframes做{
  100％{
    變換：比例尺（0.69）;
  }
}

使用nth-child選擇器的交錯動畫延遲（ animation-delay ）為動畫帶來了微妙的隨機性。

未來的增強

幾種改進可以增強這種影響：

• 著色：添加顏色會增加視覺興趣。受控的隨機化而不是完全隨機的顏色，將產生更令人愉悅的結果。
• 分組美學：分組類似的中風寬度或顏色會產生更具凝聚力的外觀。
• 高級運動：引入旋轉，頁面移動或多個爆發會增加動態。
• 交互式控件：像DAT.GUI這樣的庫將允許用戶直接在演示中調整參數。

以上是灰色爆發的詳細內容。更多資訊請關注PHP中文網其他相關文章！