项目背景
在访问一些彩色网站时，常常会因为进入网站时的渐变加载动画而感到愉悦。 这是因为一方面，色调可以传达情感，另一方面，网站也用它来给用户留下第一印象。
既然如此，本章我们将使用Axure和CSS来实现背景渐变。
项目建设
首先，创建一个新项目并将其命名为 Gradient。
页面样式
为了更好地展示CSS实现背景渐变动画的有效性，我们使用圆形作为显示区域。
推入“矩形 2”组件并将其命名为“BackGround”。
设置位置为(0, 0)，规格设置为300*170。 规范并不重要，因为创建新的交互时会全屏显示，但为了强迫症，我们每次都会预先设置组件的位置。
互动 - 设置规格
接下来，我们来实现第一个交互动作。 当我们在浏览器中预览时，“背景”矩形将扩展到浏览器显示的窗口大小。
选择“BackGround”矩形，在交互工作栏中新建一个交互，选择“加载时”，选择“设置规范”，设置目标为“当前”，点击X轴上的fx，打开编辑值弹出-向上窗口，并将变量插入为“[ [Window.width]]”。
同样的方法，点击Y轴上的fxcss设置渐变色，打开编辑值弹出窗口，插入变量为“[[Window.height]]”。
最后，将锚点设置为底部中心。
逻辑梳理——调用CSS
在将CSS代码加载到“BackGround”矩形之前，我们首先计划下载CSS代码。 Axure不仅可以调用JavaScript代码，它的API还可以调用CSS代码。 以下代码是一个示例：
javascript: $('
.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;
}
').appendTo('head');
复制代码首先，我们在style标签上设置所有bags的样式（html中的所有元素都是bags）。
我们已经给出了“BackGround”矩形的样式、行距、宽度、高度等参数。
最重要的是背景颜色，我们给出了从左上角开始的对角线颜色渐变，颜色顺序为#EE7752、#E73C7E、#23A6D5、#23D5AB。
Linear-gradient是CSS中的渐变函数，用于创建具有两种或多种颜色的线性渐变的图片。
背景背景色使用方法如下：
background: linear-gradient(direction,color1,color2,...)
复制代码Direction决定了我们梯度的方向，有以下几种：
参数说明 说明
向左
设置从右到左的渐变
相当于270度
向右
设置从左到右的渐变
相当于90度
到达顶点
设置从下到上的渐变
相当于0度
到底部
设置从上到下的渐变
到右上方
从左下角到右上角的对角线
torighttop=totopright
最后，我们还添加了一个15s的渐变动画。
交互——加载CSS
接下来的下拉菜单中，我们加载 CSS 样式。
在“交互”工具栏中，设置规格的交互动作下，减少动作，选择“打开链接”，选择“链接到URL或文件路径”，点击fx打开编辑值弹窗，输入我们在里面规划了CSS代码。
项目预览
完成后我们在浏览器中预览效果。
哈哈哈css设置渐变色，效果不错！
为了让这个项目能够公开访问，我们可以生成一个html文件，然后发布到gitHub或者gitee，这样就可以将网站分享给同学了。
项目地址
CSS渐变背景：
快来尝试一下吧！
发表评论