【Fiori系列】为什么SAP Fiori活的如此精致

公众号：SAP Technical

本文作者：matinal

原文出处：http://www.cnblogs.com/SAPmatinal/

原文链接：【Fiori系列】为什么SAP Fiori活的如此精致

前言部分

大家可以关注我的公众号，公众号里的排版更好，阅读更舒适。

正文部分

时间追溯到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云彩"。

最后安利一下我们的国产动画电影。