前言部分
大家可以關注我的公眾號，公眾號里的排版更好，閱讀更舒適。
正文部分
時間追溯到1992年，SAP的創始人們發布了R3版本，這是一個經典的出現。這個版本的系統提供包括所有業務領域的業務處理流程的集成的解決方案。
SAP R3的三層架構體系得到了大范圍的認可，這也是SAP可以推廣成為全球范圍產品的開端，這個階段的發展迅速，隨后出現了諸如虛擬機，抽象數據訪問，跨硬件、操作系統、數據庫運行，還有更重要的NetWeaver出現。
一直到現在還有很多項目在使用的ECC的出現，NetWeaver是SAP的集成技術平台，是自從SAP Business Suite以來的所有SAP應用的技術基礎。
今天不講歷史，所以SAP的一些發展情況我就不詳細寫了。
再到后來，就是我們熟悉的S4出現了，S4的出現帶來了一個新鮮事物，也就是我們現在經常提到的SAP Fiori，給SAP添加了很多新的色彩。
SAP Fiori的出現，讓SAP顯得更加的鮮活，而且充滿着活力，在Fiori的每個版本發布后，都會有很多細節的改進，SAP Fiori Launchpad每次都會有一些微妙的調整，比如外觀上顏色的漸淡、立體感，更加飽滿等等。
今天聊點技術類的問題，但是看似和SAP沒有多大關系，但是就是在SAP Fiori中會使用到的美工技術。我會在公眾號：SAP Technical 里繼續發送Fiori的文章。
SAP Fiori基礎是一個輕量級的樣式表和HTML標簽庫，允許開發人員在任何基於Web的UI框架中構建SAP Fiori應用程序，比如Vue。
我在以前推送的文章中也有介紹了SAP的UI框架包含的內容，也就是Fiori的實現內容，其中一項就包括了CSS。所以今天聊點簡單的css的內容。
CSS
CSS(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標准通用標記語言的一個應用）或XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。
CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
CSS3是CSS技術的升級版本，CSS3規范里的元素能以不同速度向前發展，因為不同的瀏覽器廠商只支持給定特性。早在2001年W3C就完成了CSS3的草案規范。
藍天白雲
matinal一直喜歡藍天白雲的色彩，或者說是那種無憂無慮的感覺。今天要講的內容就和這個有關，也要和我們介紹的css技術有關，就是用css做一個藍天白雲的圖案。
當然這篇文章是要有一定的CSS基礎才可以。如果沒有基礎的話，還是要學習一下基礎內容再來看。
先介紹幾個css基本的屬性：
transform：向元素應用 2D 或 3D 轉換
box-shadow：向框添加一個或多個陰影
clip-path：區域內的部分顯示，區域外的隱藏
animation：動畫屬性
想到藍天白雲就應該有個大概的印象，就是有藍色的天空和白色的雲彩，雲彩要有陰影部分，最好是雲彩還可以有晃動的感覺。
背景設定
首先要設定一個背景，也就是天空為背景，我們設定為藍色，還有就是長度高度這些，如果在細致一些，可以把邊角設置為圓角，會顯得更加圓潤一點。
.weather {position: relative;display: inline-block;width: 200px;height: 220px;background: #0000FF;border-radius: 10px;}
雲彩創作
畫雲彩，其實也是看個人的想法，不同的人可能用的形式不同，我想就是用幾個白色的圓形相互重疊一部分后，就形成了雲朵的形狀。大家可以想象一下，或者是用筆在紙上簡單畫一下。綜上，我們先畫一個基礎的圓形。
.matinal:before { content: ""; position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #F5FFFA; border-radius: 50%; z-index: 2;}
然后就是做重疊的部分了，這個地方就用到了之前說的屬性box-shadow，做法如下
box-shadow: #F5FFFA 22px -18px 0 6px
按照這種做法，我們多復制幾個雲彩的模型，最后的代碼如下
.matinal:before { content: ""; position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #F5FFFA; border-radius: 50%; box-shadow: #F5FFFA 22px -18px 0 6px, #F5FFFA 55px -8px 0 5px, #F5FFFA 88px 5px 0 -5px, #F5FFFA 36px 8px 0 8px, #F5FFFA 60px 5px 0 3px, #D8BFD8 30px -25px 0 8px, #D8BFD8 65px -13px 0 6px, #D8BFD8 92px -6px 0 -6px; z-index: 2;}
其實，就是做了一些白色圖形和一些淡灰紅色圖形，然后在做一些重疊起來的效果，這樣看起來更有雲彩的效果，顏色可以自己根據自己的想法來定。
上下浮動
再做一個晃動的畫面，就是讓雲彩更像雲彩一點，有浮動的感覺。直接來看一下實現方法：
.matinal:before { animation: seeMove 3s linear infinite;}@keyframes seeMove { 0% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -60%); } 100% { transform: translate(-50%, -50%); }}
來看一下我們最后出來的效果：
瓦藍瓦藍的天空，絕對沒有霧霾，希望看到這張圖片的朋友，都能有一個瓦藍瓦藍的心情。
這樣就做好了一個雲彩的動畫效果。其實CSS是一個很普遍的技術，太多地方可以學習了。
我這里舉個栗子，比如查找一些屬性或者是一些簡單例子，通過CSS的一些網站的總結學習（關注公眾號：SAP Technical 會經常發布技術類文章）。
web方面必定要使用到H5，而H5里也必然會需要用到css，當然很多做后台的可能覺得沒必要學，有人說，我用vue還有必要學這些嗎，這還真是個問題，今天就不討論這么多了，文章過長，未必有多少人能看到這里。
想要獲取完整代碼，還有完整的css顏色代碼大全的朋友，請在后台回復"css雲彩"。
最后安利一下我們的國產動畫電影。
