前言部分
你們能夠關注個人公衆號，公衆號裏的排版更好，閱讀更溫馨。css
正文部分
時間追溯到1992年，SAP的創始人們發佈了R3版本，這是一個經典的出現。這個版本的系統提供包括全部業務領域的業務處理流程的集成的解決方案。html
SAP R3的三層架構體系獲得了大範圍的承認，這也是SAP能夠推廣成爲全球範圍產品的開端，這個階段的發展迅速，隨後出現了諸如虛擬機，抽象數據訪問，跨硬件、操做系統、數據庫運行，還有更重要的NetWeaver出現。vue
一直到如今還有不少項目在使用的ECC的出現，NetWeaver是SAP的集成技術平臺，是自從SAP Business Suite以來的全部SAP應用的技術基礎。web
今天不講歷史，因此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雲彩"。
最後安利一下咱們的國產動畫電影。