创建灵活的UI动画

IT资讯 2018-07-25 117 次浏览 0 条评论

使用Bootstrap 4,CSS3,Sass和HTML为此团队页面创建很酷的UI动画。

一个团队页面显示团队成员的照片,姓名和职位名称以及翻转动画,缩小了个人资料图片的大小,从顶部显示一个彩色圆圈,并从底部显示社交媒体图标。
设计师和开发人员越来越频繁地认识到运动设计在用户体验环境中的重要性。网络上的动画不再是让用户高兴和惊叹的一种方式,而是一种让体验变得轻松,有趣和难忘的功能性工具。从CSS动画到使用Bootstrap或HTML的技术,有许多不同的工具和方法可供使用。

用户界面环境中的动画仍然是一个非常新的领域。没有太多资源可以教授最佳实践或显示我们可以遵循的UI动画的常见模式。大多数时候,它是关于实验,用户测试,也许是一些试验和错误。

15个响应式网页设计教程
所以在本教程中,我们将创建一些不会混淆的东西,遵循常见的模式并且很时尚。这将是您经常在公司网站上看到的团队资料部分。我们的想法是在每个人徘徊时向团队/工作人员展示更多信息。在整个教程中,我们将使用CodePen,但当然您可以使用自己喜欢的编辑器和开发环境。

01.设置好

首先打开CodePen并创建一个新笔。我们将使用Bootstrap 4和Sass(.scss),因此请确保在设置中包含Bootstrap CSS和JS作为资源链接,并将CSS设置为SCSS。您需要添加的另一个资源链接是Font Awesome,我们将用于社交图标。

02.创建容器,行和列

容器是Bootstrap用作其基本布局元素的,当您使用默认网格系统时,它们是必需的。在容器中,您需要连续添加。行是列的包装器,您可以指定可能的12列中的列数以及断点。在我们的例子中,我们想要一个具有中等大小断点的元素,并在宽度上填充三列。

<div class =“container”>
<div class =“row”>
<div class =“col-md-3”>
<! - 在此添加图片链接和颜色
</ DIV>
</ DIV>
</ DIV>
03.设置个人资料图片和颜色

我们将开始的第一个配置文件UI元素将是一个女性团队成员,她将成为蓝色团队的一员。颜色将使用一个名为blue的类指定,实际颜色最终将使用Sass变量定义,我们将在后面的步骤中进行定义。然后我们需要添加一张照片并给它一个叫做照片的课程。

<div class =“team blue”>
<div class =“photo”>
<img src =“https://image.ibb.co/kcBGMS/profile_test02.jpg”alt =“Libby”>
</ DIV>
</ DIV>
04.添加个人资料名称和标题

开始创建团队成员条目,显示团队成员照片,职位描述和社交媒体信息。

最后一段HTML将添加名称,标题和社交图标

要添加的最后一部分HTML将用于名称,标题和社交图标,这些图标将添加到我们刚刚在最后一步中添加的最后一个div标记下面。对于社交图标,我们将使用Font Awesome,这些将被放置在无序列表中。

<div class =“profile-txt”>
<h1 class =“title”> Libby </ h1>
<span class =“position”>网页设计师</ span>
</ DIV>
<ul class =“social-icons”>
<li> <a href="" class="fa fa-facebook"> </a> </ li>
<li> <a href="" class="fa fa-twitter"> </a> </ li>
<li> <a href="" class="fa fa-linkedin"> </a> </ li>
<li> <a href="" class="fa fa-dribbble"> </a> </ li>
</ UL>
</ DIV>
</ DIV>
05.设置Sass变量

如果您正在使用CodePen,那么您已经安装了Sass并准备好了。您只需单击笔设置图标/按钮,然后选择SCSS作为CSS预处理器。然后我们可以继续添加一些将存储所有颜色的变量。我们使用rgba作为颜色值,以便我们更有意义地控制所有颜色的不透明度。

$ blueGradient:rgba(103,188,223,.8);
$ lightGreen:rgba(188,219,183,.5);
$ green:rgba(119,180,109,0.5);
$ green-border:rgba(171,221,164,0.5);
$ blue:rgba(80,205,227,1);
$ blue-border:rgba(147,223,236,1);
06.上传背景图片

为了让事物看起来更有吸引力,我们将在身体上放置一个漂亮的背景图像。在这里,我们可以使用我们的第一组变量,并为背景图像提供从浅绿色到蓝色的令人愉悦的渐变叠加。然后为了使我们的背景图像完全响应,我们将视图高度设置为100vh。

身体 {
背景:线性渐变(右边,$ lightGreen,$ blueGradient),url('https://image.ibb.co/mdDPU7/clouds_cornfield_countryside_158827.jpg')中心不重复;
背景尺寸:封面;
位置:相对;
身高:100vh;
}
07.选择个人资料背景和图像

每个团队简介将被赋予相同的样式,并且将使用班级团队。背景将是白色的,所有内容都居中,我们需要确保将位置设置为相对。然后我们可以包含配置文件图像的CSS。为获得最佳效果,请确保您使用的原始图像尺寸不大于200像素。但是,我们将在照片CSS规则中更改这些内容的高度和宽度。

.team {
填充:30px 0 40px;
margin-top:60px;
背景:#fff;
text-align:center;
溢出:隐藏;
位置:相对;
游标:指针;
box-shadow:0 0 25px 1px rgba(0,0,0,0.3);
.photo {
display:inline-block;
宽度:130px;
身高:130px;
margin-bottom:50px;
位置:相对;
z-index:1;
}
}
08.添加动画

图像显示翻转动画从框架顶部打下彩色圆圈。

我们可以通过设置其位置的最低百分比来控制可以看到多少蓝色圆圈

我们将添加的第一部动画将位于我们的个人资料元素的顶部。我们的想法是,当我们将鼠标悬停在整个元素上时,蓝色圆形将会生成动画。我们可以通过指定具有最低百分比的位置来控制我们可以看到多少蓝色。因此,请使用此百分比,您将更好地了解其工作原理。你永远不会知道:你甚至可能发现更好的效果!

.blue .photo:在{之前
内容:“”;
宽度:100%;
身高:0px;
border-radius:50%;
背景:$ blue;
位置:绝对;
底部:130%;
右:0;
左:0;
变换:规模(3);
过渡:所有.3s线性0s;
}
.team:hover .photo:before {
身高:100%;
}
09.为团队照片制作动画

团队照片是我们在这个UI中的焦点,可能是您期望以某种形状或形式制作动画的最明显的元素。我们将在此步骤中添加的CSS将首先将照片转换为较小的圆圈,然后当悬停在其上时,将添加一个浅蓝色边框,照片将与边框一起缩小。随着过渡添加,我们得到一个很好的流体动画。

.blue .pic:在{之后
内容:“”;
宽度:100%;
身高:100%;
border-radius:50%;
背景:$ blue;
位置:绝对;
顶部:0;
左:0;
z-index:1;
}
.team .photo img {
宽度:100%;
身高:自动;
border-radius:50%;
变换:规模(1);
过渡:所有0.9s缓解0;
}
.blue:hover .photo img {
box-shadow:0 0 0 14px $ blue-border;
变换:规模(0.6);
}
10.调整配置文件名称和位置

显示半完成翻转动画的图像,显​​示团队成员照片缩小并生成粗边框。

悬停时,照片上会添加浅蓝色边框

配置文件名称和位置需要一点点整理。这些不会动画,但如果您愿意,这不应该阻止您将这些动画添加到这些动画中。也许在悬停时可以稍微调整它们,因为你可以通过调整照片的大小来获得足够的空间。

.profile-txt {
margin-bottom:30px;
.title {
font-size:2rem;
font-weight:700;
颜色:#333;
字母间距:1.5px;
text-transform:capitalize;
margin-bottom:6px;
}
。位置{
显示:块;
font-size:1rem;
颜色:#555;
}
}
11.添加社交图标
社交图标将首先位于页面底部-100px之外。然后当我们将鼠标悬停在它上面时,底部位置将设置为零,并且添加了一个过渡,这将为我们提供一个漂亮的平滑动画,因为它会向上移动到视图中。图标将被赋予自己的悬停状态,将背景设置为白色,将图标设置为蓝色。

.blue .social-icons {
宽度:100%;
list-style:none;
填充:0;
保证金:0;
背景:$ blue;
位置:绝对;
底部:-100px;
左:0;
过渡:全部0.6s轻松;
li {
display:inline-block;

一个 {
显示:块;
填充:8px;
font-size:1rem;
颜色:#fff;
text-decoration:none;
过渡:全部0.5秒轻松;
&:hover {
颜色:$ blue;
背景:#fff;
}
}
}
}
.team:hover .social-icons {
底部:0px;
}
12.成为绿色团队成员

为了混合一点,我们可以开始为我们的团队添加更多成员。我们将用于下一个的颜色将是绿色。但首先回到HTML部分/文件,我们需要做的就是将col-md-3类 - 而不是行 - 复制到社交图标下的最后一个div标签并粘贴进去。

<div class =“team green”>
<div class =“photo”>
<img src =“https://image.ibb.co/mpRLNS/mick_UI.jpg”alt =“Libby”>
</ DIV>
将蓝色类更改为绿色后,我们最终可以添加所有可以为我们提供相同动画的CSS。

.green:hover .photo img {
box-shadow:0 0 0 14px $ green-border;
变换:规模(0.6);
}
.green .photo:在{之前
内容:“”;
宽度:100%;
身高:0px;
border-radius:50%;
背景:$ green;
位置:绝对;
底部:135%;
右:0;
左:0;
变换:规模(3);
过渡:所有.3s线性0s;
}
.green .social-icons {
宽度:100%;
list-style:none;
填充:0;
保证金:0;
背景:$ green;
位置:绝对;
底部:-100px;
左:0;
过渡:全部0.6s轻松;
li {
display:inline-block;
一个 {
显示:块;
填充:8px;
font-size:1rem;
颜色:#fff;
text-decoration:none;
过渡:全部0.5秒轻松;
&:hover {
颜色:$ green;
背景:#fff;
}
}
}
}
这种方法的优点在于您可以根据需要重复许多不同的颜色类,使您可以根据需要巧妙地设置UI动画主题。

本文最初发布于net的第307期,这是世界上最畅销的网页设计师和开发者杂志。购买问题307或订阅网络。

想进一步了解UI动画的来龙去脉?

史蒂文罗伯茨将于2018年9月19日至21日在Generate London举办他的演讲CSS动画:超越过渡。

史蒂文罗伯茨正在发表他的演讲CSS动画:超越生成伦敦的过渡

广告

如果您有兴趣了解如何使用时尚的UI动画让您的网站流行和闪耀,请确保您已获得Generate London的门票。

作为Asemblr.com创意开发人员的前端设计师和开发人员,Steven Roberts将发表他的演讲 - CSS动画:超越过渡 - 他将向您展示最佳工具并重新创建一些最佳动画网络必须提供,同时发现CSS动画的可能性和局限性。

0

【飞龙网.COM】不一样的IT资讯网,艺术,设计,插画,资源技巧分享!

发表评论