前言部分
你们能够关注个人公众号，公众号里的排版更好，阅读更温馨。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云彩"。
最后安利一下咱们的国产动画电影。