使用css繪製圖形

菜也發表於2019-03-13
CSS

在前端效能優化中，資源的載入對頁面效能有非常大的影響，如何減少資源的載入，特別是圖片的載入我覺得是每一位前端都需要去研究的內容。

以最近開發的一個頁面為例，分享一下用css繪製圖片，從而減少圖片資源的載入。

使用css繪製圖形

紅框所示就是頁面使用css繪製的圖形，如果覺得對如何繪製有疑問，不妨就參考一下。

內凹半圓形

內凹所在模組的背景部分有漸變色和一張圖片，可以使用css3的background設定多個背景，需要提醒的是多背景圖堆疊順序是從後往前的。比如模組的背景圖片是顯示在漸變色上面，那麼寫法就是：

background: url('https://gw.alicdn.com/tfs/TB1Rk9mLMTqK1RjSZPhXXXfOFXa-208-109.png') right bottom,
    -webkit-linear-gradient(-45deg, red 15px, green 300px) top left;
複製程式碼

另外這個模組的需求是除了需要畫出兩個內凹半圓形以外，還需要做鏤空處理，透出頁面的背景圖內容。我這裡是使用了css3的mask屬性，mask屬性的寫法跟background的很類似，這裡就不做詳細介紹。

其中mask-image是通過屬性值裡圖片的透明度來控制指定區域的顯示和隱藏，透明度為0隱藏，1位顯示。所以只需要繪製出想要的形狀並設定透明度為0，就可以實現鏤空的效果。

-webkit-mask-image: 
	-webkit-radial-gradient(center left, rgba(0,0,0,0) 10px, rgba(0,0,0,1) 10px),
    -webkit-radial-gradient(center right, rgba(0,0,0,0) 10px, rgba(0,0,0,1) 10px);
    -webkit-mask-size: 200px 400px, 200px 400px;
    -webkit-mask-position: left, right;
    -webkit-mask-repeat: no-repeat;
複製程式碼

檢視例項效果和原始碼

通過漸變和background的組合可以實現很多好玩的效果，模組中的那一行鋸齒也是通過的backgorund+漸變實現的。

漸變箭頭

用css繪製箭頭還是比較簡單，就是利用兩個子元素做正負45度的旋轉就可以了，再設定背景漸變就能畫出視覺稿的效果。再配合css3的animation，一個漸變箭頭的動畫就做出來了。

使用css繪製圖形

檢視例項效果和原始碼

除了可以使用css自己畫以外，也可以使用iconfont的圖示，我這裡的箭頭還需要有漸變，而標準庫中只有純色的箭頭圖示，不過還好css3中提供了background-clip,可以將元素背景色裁剪成文字(iconfont的圖示也是文字)的前景色。

.arrows{
  background-image: linear-gradient(90deg, #FCCC98, #D69851);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 15px;
  line-height: 15px;
  -webkit-text-fill-color: transparent;}
複製程式碼

檢視例項原始碼

波浪線

繪製波浪線我的第一反應是用SVG或者canvas的貝塞爾曲線，使用canvas就來畫個波浪線成本稍微有點高。使用SVG自己手寫的話成本也比較高，但如果視覺同學用的是Sketch做的視覺稿，那隻需要匯出SVG程式碼就可以了。

SVG繪製的波浪線例項及原始碼

除了可以使用SVG，也可以利用css的border屬性來模擬弧線。因為border可以給某一條邊框設定圓角，視覺效果就像是一條弧線，通過元素組合就可以實現波浪線的效果。

.mask-curve{
    width: 50px;
    height: 100px;
    background-color: #D6954E;
    box-sizing: border-box;
    border-bottom-right-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
複製程式碼

border繪製的波浪線例項及程式碼

小結

目前的css功能越來也豐富，可以使用css替換很多的以前需要圖片才能完成的效果，從而減少圖片的載入，達到優化頁面效能的目的。上面的實現也只是個人的想法，如果有更好的方案歡迎交流。

相關文章