Css3模擬彩色燈光

開發工具與關鍵技術：DW前端
作者：盤子
撰寫時間：2019年2月18日
下面來分享下一個簡單而又好看的彩色燈光樣式，源代碼部分，見如下截圖：

源代碼部分所敲的代碼很簡潔，從此處也可以看出這個案例的簡單程度。css樣式部分的代碼截圖如下，見截圖：

此案例使用了css3動畫transform中的matrix屬性與css3背景這兩個來完成的。matrix（）函數是一個基于矩陣變換的函數，含有六個參數值如matrix（1，2，3，4，5，6，），用來指定一個2D變換。就是基于水平方向（X軸）與垂直方向（Y軸）重新定位元素。而當它是含有十六個參數值如matrix3d（0，1，2，3，4，5，6，7，8，9，10，11，12，13，14，15）時，它就是用來指定一個3D變換。而且每個參數值都是可變換的，數值不同所得的效果也不同。matrix函數2D變換和3D變換這兩個變換的用法分別為：
2D變換：transform:matrix(1,2,3,4,5,6);
3D變換：transform:matrix3d(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15);
現在就是用3D變換，把最初的圖形小圓點逐步演變成了多彩的舞臺燈光。每一次的變換都屬于重新定位，整個過程伴隨著圖形的多樣變化。其過程效果如最后的效果圖所展示。
下面是另一部分css樣式代碼展示圖，見代碼，如下截圖：

如圖所示，除卻公共樣式每一個都設置了不同的背景顏色。Css3背景可分為四個分別為：背景原點控制、背景剪切控制、透明背景、漸變背景（倒影）。而這次主要用漸變背景。
漸變就是多種顏色混合而成的效果，css3要實現漸變，就必須使用漸變函數來設置，即background或者backgroung-image屬性。其用法如圖中：
background:radial-gradient(ellipse,white,blue);
其顏色可設置為多個，在后面依次排列出即可。所得的顏色順序由里到外，即最先設置的顏色在圖形最中間，其余的依次排開。
為了防止前面彩色燈光在散開過程中會完全遮蓋后面的彩色燈光，在這就給它設置了個透明度。見下面效果圖：

效果圖

總結

以上是生活随笔為你收集整理的Css3模拟彩色灯光的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。