Axure实战22:使用Axure和CSS实现渐变色背景

在本章中，你将学会使用Axure和CSS实现渐变色背景。

项目背景

在访问一些色彩网站时，经常会因为网站进入时的渐变色加载动画而心情愉悦。这是因为一方面色彩可以传递情绪，另一方面网站也以此给了用户第一印象。

既然如此，那么本章，我们就来使用Axure和CSS实现背景渐变。

项目搭建

首先，创建一个新项目，命名为Gradient。

页面样式

为了更好演示CSS实现背景渐变动画效果，我们使用一个矩形作为展示的区域。

拖入一个“矩形2”组件，命名为“BackGround”。

设置位置为（0，0），设置尺寸为300*170，在尺寸就不重要，因为新建交互时将会全屏展示，但这里为了强迫症需要，每次我们都会预先设置好组件的位置。

交互动作-设置尺寸

下面，我们来实现第一个交互动作，当我们在浏览器中预览时，“BackGround”矩形将会以展开至浏览器展示的窗口大小。

选中“BackGround”矩形，在交互工作栏中新建交互，选择“载入时”，选择“设置尺寸”，目标为“当前”，在X轴点击fx，打开编辑值弹窗，插入变量为“​

​[[Window.width]]​

​”。

同理，在Y轴点击fx，打开编辑值弹窗，插入变量为“​

​[[Window.height]]​

​”。

最后，设置锚点为顶部居中。

逻辑梳理—调用CSS

在给“BackGround”矩形加载CSS代码前，我们先准备下CSS的代码，Axure除了可以调用JavaScript代码外，它的API也可以调用CSS代码，以下面的代码为例：

javascript: $('<style>.box_2{
     margin: 0;
     width: 100%;
     height: 100vh;
     font-family: "Exo", sans-serif;
     color: #fff;
     background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
     background-size: 400% 400%;
     animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
     0% {
          background-position: 0% 50%;
     }
     50% {
          background-position: 100% 50%;
     }
     100% {
          background-position: 0% 50%;
     }
}
.box_2{
     width: 100%;
     position: absolute;
     top: 35%;
     text-align: center;
}
</style>').appendTo('head');      

首先，我们在在style标签里面给所有盒子（html中所有元素都是盒子）设置样式。

我们赋予了“BackGround”矩形样式，边距、宽度、高度等参数。

最重要的是背景颜色，我们给了一个从左上角开始的对角线颜色渐变，依次颜色顺序为#EE7752, #E73C7E, #23A6D5, #23D5AB。

Linear-gradient是CSS中的一个渐变的函数，用于创建一个两种或多种颜色线性渐变的图片。

background背景颜色的使用方法如下：

background: linear-gradient(direction,color1,color2,...)      

direction确定我们渐变的方向，有以下几种：

参数	描述	描述
to left	设置渐变从右到左	相当于 270deg
to right	设置渐变从左到右	相当于 90deg
to top	设置渐变从下到上	相当于 0deg
to bottom	设置渐变从上到下
to right top	从左下角到右上角，对角线角度	to right top = to top right

最后，我们还加了15s的渐变色动画。

交互动作—加载CSS

接下拉，我们加载CSS样式。

在“交互”工具栏中，在设置尺寸的交互动作下增加动作，选择“打开链接”，选择“链接到URL或文件路径”，点击fx打开编辑值弹窗，输入上面我们准备好的CSS代码。

项目预览

完成后，我们在浏览器中预览下效果。

哈哈哈，效果不错！

为了让这个项目能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。

项目地址