10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

今天分享的是由 设计小咖的FS 翻译的CSS前端动画,有点厉害,并且带有清晰的源代码,请大家欣赏与研究,enjoy!

强列建议可以关注如下10个令人过目难忘的logo动画效果合集。

1. Flowers SVG

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

SVG动画(SVG animation)算是Web端最热门的动画趋势之一。 而这个花状的LOGO动画算是SVG的动画效果中的一个很不错的例子。

图标和文字是创建在HTML中的<svg>标签内。 然后通过CSS控制顺序动画,并设定自动播放。 这需要设定一些SVG特定的CSS属性,如stroke-dashoffset,它按顺序推动轮廓运动来创建这个有趣的动画效果。

2. Carbon LDP

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

Carbon LDP logo相当多细节且复杂, 但是开发GG David McFeders 基于CSS / Compass来实现了这个动感十足的Carbon logo

你能通过代码轻易地自定义它的尺寸和运动速率, 且是循环不止地运动下去的。并且令人印象深刻的是这一切是纯用CSS实现,而没有使用到JS。 虽然字母由单个PNG图像构成,但你也可以使用自己的自定义字体去修改此设计。

3. Binary Lab

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

Binary Lab的动画 logo是这个列表中较为复杂的动画效果之一。 它会是从一个瓶子拉取出一些数字,并瓶口也即LOGO上边渐隐消失。

动画本身是通过CSS控制的,但它还依赖于TweenMax库( TweenMax library)添加重复数字和自定义透明度的转换。 这是一个结合使用SVG,CSS和JavaScript实现的非常有创意的的现代网络动画。

4. Pure CSS3 Stack Overflow

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

Stack Overflow 的LOGO是我最爱之一,因为它即简单又识别度高。 而这个堆栈动画只使用了纯CSS3来实现。

这是迄今为止我见过的最令人印象深刻的纯CSS动画之一。 最终的输出真的看起来像官方的标志,而动画在每个主流的浏览器都很流畅(animation feels smooth)。相信任何人喜欢纯CSS / SCSS动画都会喜欢这个片段。

5. Monster Energy Logos

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

这个Monster Energy Logo动画是SVG结合间隔很大的CSS过渡来动画来实现的。 如果你想对LOGO有类似的褪色效果,当中的代码可供学习参考。

所有的动画时间轴都是直接通过Sass控制,所以这也是一个纯CSS动画。 而你可以尝试去改变变量来调整速度,淡化的颜色或其他任何东西。

6. Subvisual

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

Subvisual的团队有一个非常独特的动效LOGO, 它有两个因素:LOGO文本和“S”图标。

而这一切都是建立在SVG元素上的,所以能使操作更容易。虽然绝大多数动画是通过CSS完成的,但另外也包括有JavaScript(并依赖于TweenLite 库)。 这是一个整齐而简洁的效果,可以根据用户动作(悬停,点击等)重复或触发。

7. Pixel Logo Animation

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

这个LOGO是使用自由像素字体Jura来实现的像素动画效果
它通过使用HTML canvas元素操作纯文本。 动画本身是由CSS3动画属性实现的,但也有借助jQuery控制。
这绝对是一个使用canvas元素结合webfont来实现的酷且有趣的范例。

8. Alex Aloia Logo

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

果你正在寻找一个真正的复杂的LOGO动画,那么可查看由开发GG Alex Aloia所创建的这个示例。他是使用他的名字作为LOGO,创建了一个复杂的SVG形状系列,并模拟“绘图”效果创作的动画。

单纯使用CSS不能实现整个效果,还需要一些JS转换库,如DrawSVG 和较流行的D3.js。而使用开源库来创建这种独一无二的动画是一种有趣的方式。

9. Bayleys

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

Bayleys LOGO 对于实现为动画效果其实算是一个晦涩的选择。因它确实有坚实的边缘,使重新创建的LOGO很可能看起来像馅饼。

而Rafael Contreras只使用38行代码就实现了这个不俗的动画片段。LOGO志本身是使用SVG标签构建的,用CSS相关动画属性操作这些标签。 LOGO元素在不同的方向移动的这种效果实是令人着迷……

10. Nintendo Switch

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

任天堂的最新游戏控制台带有一个很酷的LOGO动画。 由Koto Furumiya创建。

Koto使用SVG重新构建任天堂的”开关LOGO”,同时使用CSS动画控制整个事物。而整个动画效果只需要约50行的CSS代码,会否让你觉有点不可思议?

我确实要为这个标志动画贴合真实性点上一赞,它的从强有力的下推和反弹动效真的很恰当地展现任天堂LOGO。

写在最后

所有这些例子都是免费的,开源的,为您自己的项目研究,克隆和操作。 我希望你喜欢这些演示,如果你刚好正在寻找类似的CSS动画的例子,看看这个集合,看看其他人做了什么,相信能为你带来不错的收获或灵感。

 

转载注明:云瑞设计
原文地址:设计小咖的FS

分享到:

常见问题

  • 1、为什么PPT、APP和网页等模版里没有示例图片?
    因为这些素材只是模版,一般不包含里面的示例图片,示例图片是需要另外购买的;
  • 2、百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
  • 3、解压时提示损坏,是什么原因?
    可能没下载完,如果打不开请确定您下载的文件和百度网盘上一模一样大,如果您用的是MAC,下载下来的文件会比网上的大一些,如果文件一样大,还不能打开,请在底部留言;
  • 4、PS动作文件如何安装和使用?
    1.双击安装好所有的笔刷(.abr)、图案(.pat)和动作(.atn)等文件;
    2.选择分辨率在3000PX*3000PX,72dpi左右的高清素材图;
    3.使用英文版的Photoshop (PS中文变英文的办法 https://www.yrucd.com/74023.html);
    4.用PS打开素材,并且保证素材在background图层上(将素材合并到background上);
    5.新建空白图层,名为brush;
    6.在brush图层上用画笔覆盖素材主体物(该图层一般命名为brush,少量资源命名为profactions);
    7.在动作面板执行该动作,实现效果;
  • 5、素材更新频率和质量问题
    目前云瑞素材的日更新量增加了不少,所以多了很多不同种类的素材,之所以发这些素材,是为了满足更多人的需求,素材种类多了,就很难保证所有素材每一个人都喜欢,但品质我们还是会精选,也会根据用户数据反馈来调整更新策略;另外,后续也会和今日头条一样,做智能推荐,推荐你喜欢的内容,这样你不点的素材就很难再看到了。
  • 6、素材能商用么?
    素材仅供个人学习使用。

评价交流

  • 忘忧草 说:

    2018年1月30日 10:01

    源代码在哪可以看到呢

  • 忘忧草 说:

    2018年1月30日 10:01

    我是小白一枚,想问一下里面的那么多animation怎么用呢

返回页顶