16个顶级CSS动画示例

IT资讯 2018-08-05 78 次浏览 0 条评论

如何在今天重新创建网络上的一些最佳动画。

您可能已经注意到网站上的CSS动画示例数量最近一直在增加。动画已经在网上崭露头角,并将成为2018年的关键网页设计趋势之一。在整个网络中,设计师正在变得富有创意,并使用CSS动画为他们的网站带来个性,快速,轻松地解释复杂的想法,并指导用户的行动。

这些动画不需要夸大其词 - 即使是微妙的动作也会产生很大的影响(大多数动画仍然源于迪士尼经典的动画原理12)。

在本文中,我们从一些最大的网站中汇集了一些CSS动画示例,并深入研究代码,向您展示如何自己实现这些效果。这个页面提供了深入的教程,或点击进入第2页,以获得鼓舞人心的效果(及其代码链接),让您深入了解自己。
01.吹泡泡

如上所示:7UP
查看代码

单击以查看动画

在7UP上提供的CSS气泡动画是将品牌主题带入网站设计的一个很好的例子。动画由几个元素组成:SVG'绘制'的气泡,然后两个动画应用于每个气泡。

第一个动画改变了气泡的不透明度,并在视图框中垂直移动;第二个创造了摇摆效果,增加了真实感。通过定位每个气泡并应用不同的动画持续时间和延迟来处理偏移。

为了创建我们的泡泡,我们将使用SVG。在我们的SVG中,我们创建了两层气泡:一层用于较大的气泡,另一层用于较小的气泡。在SVG内部,我们将所有气泡放置在视图框的底部。

<g class =“bubbles-large”stroke-width =“7”>
<g transform =“translate(10 940)”>
<circle cx =“35”cy =“35”r =“35”/>
</ g>的
...
</ g>的
<g class =“bubbles-small”stroke-width =“4”>
<g transform =“translate(147 984)”>
<circle cx =“15”cy =“15”r =“15”/>
</ g>的
</ g>的
...
</ g>的

为了将两个单独的动画应用于我们的SVG,两者都利用了transform属性,我们需要将动画应用于单独的元素。 SVG中的<g>元素可以像HTML中的div一样使用;我们需要将每个气泡(已经在一个组中)包装在一个组标签中。

<G>
<g transform =“translate(10 940)”>
<circle cx =“35”cy =“35”r =“35”/>
</ g>的
</ g>的

CSS有一个强大的动画引擎和非常简单的代码,以生成复杂的动画。我们首先将屏幕上的气泡移动并改变它们的不透明度,以便在动画的开始和结束时淡入淡出。

@keyframes up {
0%{
不透明度:0;
}
10%,90%{
不透明度:1;
}
100%{
不透明度:0;
transform:translateY(-1024px);
}
}

为了创造一个摆动效果,我们只需要向右和向右移动(或平移)气泡,只需要适当的数量 - 太多会导致动画看起来过于苛刻和断开,而太少则会被忽视。在处理动画时,实验是关键。

@keyframes wobble {
33%{
transform:translateX(-50px);
}
66%{
变换:translateX(50px);
}}

为了将动画应用于我们的气泡,我们将使用我们之前使用的组和nth-of-type的帮助来单独识别每个气泡组。我们首先将不透明度值应用于bubbles和will-change属性,以便利用硬件加速。

.bubbles-large> g {
不透明度:0;
将改变:变换,不透明;}
.bubbles-large g:nth-​​of-type(1){...}
...
.bubbles-small g:nth-​​of-type(10){...}

我们希望将所有动画时间和延迟保持在几秒钟之内,并将它们设置为无限重复。最后,我们将轻松进入计时功能应用于我们的摆动动画,使其看起来更自然。

.bubbles-large g:nth-​​of-type(1){
动画:6.5s无限; }
.bubbles-large g:nth-​​of-type(1)circle {
动画:摆动3s无限轻松进出; }
...
bubbles-small g:nth-​​of-type(9)circle {
动画:摆动3s 275ms无限轻松进出; }
.bubbles-small g:nth-​​of-type(10){
动画:向上6s 900ms无限;}
02.滚动鼠标

如上所示:波罗的海训练
查看代码

单击以查看动画

微妙的滚动鼠标动画可以在用户首次登陆网站时为其提供指导。虽然这可以使用HTML元素和属性来完成,但我们将使用SVG,因为它更适合绘图。

在我们的SVG内部,我们需要一个带圆角的矩形和一个圆圈,用于我们要制作的元素,通过使用SVG,我们可以将图标缩放到我们需要的任何大小。

<svg class =“mouse”xmlns =“...”viewBox =“0 0 76 130”preserveAspectRatio =“xMidYmid meet”>
<g fill =“none”fill-rule =“evenodd”>
<rect width =“70”height =“118”x =“1.5”y =“1.5”stroke =“#FFF”stroke-width =“3”rx =“36”/>
<circle cx =“36.5”cy =“31.5”r =“4.5”fill =“#FFF”/>
</ g>的
</ SVG>

现在我们已经创建了SVG,我们需要应用一些简单的样式来控制容器中图标的大小和位置。我们在鼠标SVG周围包裹了一个链接,并将其定位在屏幕的底部。

.scroll-link {
位置:绝对;
底部:1rem;
左:50%;
transform:translateX(-50%);
}
。老鼠 {
最大宽度:2.5rem;
宽度:100%;
身高:自动;
}

接下来我们将创建我们的动画。通过动画的0%和20%,我们希望在元素开始时设置它的状态。通过将其设置为通过的20%,它将在无限重复的部分时间内保持静止。

@keyframes scroll {
0%,20%{
transform:translateY(0)scaleY(1);
}
}

我们需要添加不透明度起点,然后将Y位置和垂直刻度转换为100%标记,即动画结束。我们需要做的最后一件事是放弃不透明度以淡出我们的圆圈。

@keyframes scroll {
...
10%{
不透明度:1;
}
100%{
transform:translateY(36px)scaleY(2);
不透明度:0.01;
}
}

最后,我们将动画应用于圆圈,以及'transform-origin'属性和will-change属性以允许硬件加速。动画属性相当不言自明。立方贝塞尔定时功能用于首先将圆圈拉回,然后将其放回鼠标形状的底部;这为动画增添了俏皮感。

.scroll {
动画名称:滚动;
动画持续时间:1.5s;
animation-timing-function:cubic-bezier(0.650,-0.550,0.250,1.500);
animation-iteration-count:无限;
transform-origin:50%20.5px;
将改变:转变;
}

03.动画写作

如上所示:八号花园
查看路径和文本的代码

单击以查看动画

Garden Eight网站使用通用的动画技术,文字似乎被写出来。为了达到这个效果,我们转向SVG。首先,我们将创建SVG。这里有两种方法:将文本转换为路径以便为它们设置动画或使用SVG文本。两种方法都有其优点和缺点。

首先创建我们的关键帧动画。我们需要它执行的唯一功能是更改stroke-dashoffset。现在我们已经创建了动画,我们需要应用我们想要动画的值。我们设置了stroke-dasharray,它会在笔划中产生间隙。我们希望将笔划设置为足够大的值以覆盖整个元素,最后通过笔划的长度抵消划线。

当我们应用动画时会发生魔力。通过设置偏移动画,我们将笔划置于视图中 - 创建绘图效果。我们希望元素一次绘制一个,在绘制一个元素的末尾和开始绘制下一个元素之间有一些重叠。为了达到这个目的,我们转向Sass / SCSS和nth-of-type,将每个字母延迟动画长度的一半,再乘以该特定字母的位置。
04.飞鸟

如上所示:FournierPèreetFils
查看单个鸟或整个鸡群的代码

单击以查看动画

我们从完全直线的矢量线开始,绘制动画的每一帧,描绘处于不同飞行状态的鸟。然后我们操纵矢量点并围绕线条和边缘。最后,我们将每个框架放入一个大小相同的盒子中并将它们并排放置。将文件导出为SVG。

HTML设置非常简单。我们只需要将每只鸟包裹在容器中以便应用多个动画 - 一个用于使鸟飞,另一个用于将其移动到屏幕上。

<div class =“bird-container”>
<div class =“bird”> </ div>
</ DIV>

我们应用我们的鸟SVG作为我们的鸟类div的背景,并选择我们想要每个帧的大小。我们使用宽度来粗略计算新的背景位置。 SVG有10个单元格,因此我们将宽度乘以10,然后稍微改变数字直到看起来正确。

.bird {
background-image:url('bird.svg');
background-size:auto 100%;
宽度:88px;
身高:125px;
将改变:背景位置;
}
@keyframes fly-cycle {
100%{
background-position:-900px 0;
}
}

CSS动画有一些你可能不知道的技巧。我们可以使用animation-timing-function来逐步显示图像 - 就像在笔记本中浏览页面以提示动画一样。

动画名称:飞行循环;
animation-timing-function:steps(10);
animation-iteration-count:无限;
动画持续时间:1s;
动画延迟:-0.5s;

现在我们已经创造了我们的飞行循环,我们的鸟目前正在扇动她的翅膀,但不会去任何地方。为了让她在屏幕上移动,我们创建了另一个关键帧动画。此动画将水平移动屏幕上的鸟,同时也改变垂直位置和比例,以使鸟更逼真地蜿蜒。

一旦我们创建了动画,我们只需要应用它们。我们可以创建我们的鸟的多个副本并应用不同的动画时间和延迟。

.bird - 一个{
动画持续时间:1s;
动画延迟:-0.5s;
}
.bird - 两个{
动画持续时间:0.9s;
动画延迟:-0.75s;
}

05.越过我的汉堡包

如上所示:更好的品牌代理商
查看跨度和SVG的代码

此动画在整个网络上使用,将三条线转换为十字形或关闭图标。直到最近,大多数实现都是使用HTML元素实现的,但实际上SVG更适合这种动画 - 不再需要使用多个跨度来膨胀按钮代码。

由于动画特性和SVG及其可导航的DOM,完成动画或转换的代码变化很小 - 技术是相同的。

我们首先创建四个元素,无论是跨越div还是SVG内部的路径。如果我们使用跨度,我们需要使用CSS将它们放在div中;如果我们使用SVG,这已经得到了解决。我们希望将第2行和第3行放在中心 - 一个放在另一个上面 - 同时将行1和4均匀地分隔在上方和下方,确保将变换原点居中。

我们将依赖于转换两个属性:不透明度和旋转度。首先,我们希望淡出第1行和第4行,我们可以使用:nth-​​child选择器来定位它们。

.menu-icon.is-active {element-type}:nth-​​child(1),
.menu-icon.is-active {element-type}:nth-​​child(4){
不透明度:0; }

剩下要做的唯一事情就是瞄准两条中间线并将它们向相反方向旋转45度。

.menu-icon.is-active {element-type}:nth-​​child(2){
变换:旋转(45度); }
.menu-icon.is-active {element-type}:nth-​​child(3){
transform:rotate(-45deg); }

06.追逐圈子

如上所示:更好的品牌代理商
查看代码

单击以查看动画

动画加载图标由四个圆圈组成。圆圈没有填充,但具有交替的笔触颜色。

<svg class =“loader”xmlns =“http://www.w3.org/2000/svg”viewBox =“0 0 340 340”>
<circle cx =“170”cy =“170”r =“160”stroke =“#E2007C”/>
<circle cx =“170”cy =“170”r =“135”stroke =“#404041”/>
<circle cx =“170”cy =“170”r =“110”stroke =“#E2007C”/>
<circle cx =“170”cy =“170”r =“85”stroke =“#404041”/>
</ SVG>

在我们的CSS中,我们可以为所有圆圈设置一些基本属性,然后使用:nth-​​of-type选择器为每个圆圈应用不同的stroke-dasharray。

circle:nth-​​of-type(1){
stroke-dasharray:550;
}
circle:nth-​​of-type(2){
stroke-dasharray:500;
}
circle:nth-​​of-type(3){
stroke-dasharray:450;}
circle:nth-​​of-type(4){
stroke-dasharray:300;
}

接下来,我们需要创建关键帧动画。我们的动画非常简单:我们需要做的就是将圆圈旋转360度。通过将我们的变换置于动画的50%标记处,圆圈也将旋转回原始位置。

@keyframes preloader {
50%{
变换:旋转(360度);
}
}

创建动画后,我们现在只需要将它应用到我们的圈子中。我们设置动画名称;持续时间;迭代计数和计时功能。 “轻松进出”将为动画带来更加俏皮的感觉。

动画名称:预加载器;
动画持续时间:3s;
animation-iteration-count:无限;
动画定时功能:轻松进出;

目前,我们有装载机,但所有元素同时旋转在一起。要解决此问题,我们会应用一些延迟。我们将使用Sass for循环创建延迟。

@for $ i从1到4 {
&:nth-​​of-type(#{$ i}){
动画延迟:#{$ i * 0.15} s;
}}

由于延迟,我们的圈子现在轮流动画,创造了相互追逐的圈子的幻觉。唯一的问题是,当页面首次加载时,圆圈是静态的,然后它们开始一次一个地移动。我们可以实现相同的偏移效果,但只需将延迟设置为负值即可停止动画中不必要的暂停。

动画延迟: - #{$ i * 0.15} s;

07.飘落的雪花

如上所见:今日美国
查看代码

单击以查看动画

雪是使用SVG创建的,该技术与我们之前创建气泡的方式非常相似。首先,我们在SVG中创建两层圆,然后通过使用关键帧动画转换Y值来为这两个层设置动画。

我们将动画应用于每个图层而不是单个元素,并为两个图层重复使用相同的动画。通过简单地给它们不同的持续时间,我们可以为我们的场景添加一些深度。
08.移动背景

如上所示:暴力法案
查看代码

单击以查看动画

A Violent Act网站使用掩蔽和微妙的动作来吸引用户的注意力。这里的大部分工作都是在设置和创建SVG中。
09.丰富多彩的过渡

如上所示:DaInk
查看代码

单击以查看正在运行的CSS动画

Da-Ink网站使用非常有效的技术在页面之间进行转换。过渡很简单,由一个SVG组成,SVG包含许多不同颜色的矩形,这些矩形位于彼此的顶部。

动画包括将X位置转换为SVG的宽度。然后,使用nth-of-type,我们应用延迟,将每个延迟偏移75ms,以创建平滑过渡。
10.脉冲圈

如上所示:PeekaBeat
查看代码

单击以查看正在运行的CSS动画

Peek-a-Beat网站上使用的脉冲动画简单而有效,不易复制 - 由SVG中的三个圆圈组成,我们在其中设置其比例和不透明度的动画。
11.扩展亮点

如上所示:Heartbeat
查看代码

单击以查看动画

这是一种非常简单但非常有效的技术。使用:: before伪元素完成转换。首先,伪元素放置在底部,同时跨越整个宽度,但高度只有几个像素。

当元素与之交互时,伪元素的宽度和高度都转换为父元素大小的105%(垂直变化更加明显),以及转换文本的颜色。
12.标题提升

如上所示:合奏通讯
查看代码

单击以查看正在运行的CSS动画

Ensemble Correspondances使用简单的动画来传达音乐中的动作。设计松散地代表乐谱。
13.旋转菜单图标

如上所示:Coulee Creative
查看代码

单击以查看动画

使用SVG创建动画菜单按钮。当用户与菜单按钮交互时,会发生动画。发生两个转换:菜单周围的圆形组旋转360度,中心的菜单图标改变颜色。

最复杂的部分是计时功能。利用cubic-bezier获得完全控制,我们能够慢慢地开始动画,在中间部分比赛并在结束时再次减速。
14.中心下划线

如上所见:战神
查看代码

单击以查看动画

动画包括将:: after伪元素定位到底部,然后在按钮与之交互时缩放它。
15.扩大角落

如上所示:亚历山德拉公主礼堂
查看代码

单击以查看动画

Princess Alexandra Auditorium网站以可视方式显示其节目的类别。每个演出卡都有一个三角形角设置颜色代表类别,然后,在悬停时,显示类别的名称。

使用:: before和:: after伪元素完成效果,转换三角形的大小并在元素交互时淡化名称。
16.滑动箭头

如上所示:格林威治图书馆
查看代码

单击以查看动画

格林威治图书馆的按钮有一个非常有趣的过渡。当与按钮交互时,会发生两件事:按钮的文本部分被覆盖,然后箭头从按钮的右侧动画并从左侧返回。

使用简单的关键帧动画,使用过渡属性和箭头完成颜色过渡。转换和动画使用相同的持续时间以同步运动。

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论