记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 23811|回复: 0
收起左侧

10个惊人的CSS和JavaScript动画logos例子

[复制链接]
发表于 2017-3-14 02:28:00 | 显示全部楼层 |阅读模式

现在构建一个HTML和CSS的动画logo比以前容易多了,配合更新的JavaScript库可以进一步推动网络动画的发展。

看看这个画廊的10个令人难以置信的自定义动画logo,它们展示的是一些未知的实体或者世界知名品牌。

1、 Flowers SVG

Web上最热门的动画趋势是 SVG annimation ,它将越来越活人,这个 花标志 动画是SVG在行动上的一个很好的例子。

Logo的图标和文字已在HTML中的<svg>中创建,动画的顺序通过CSS和自动的pageload机制控制。这需要一些SVG特定的CSS属性,如 stroke-dashoffset ,它按顺序推动轮廓运动来创建这个神奇的动画效果。

2、 Carbon LDP

Carbon LDP logo是相当详细和复杂的,但开发人员David McFeders把他的 动画Carbon logo 建立在CSS/Compass上。

每一块这样的代码都很容易从标志尺寸到动画速度进行自定义,它依赖于纯CSS,使循环无止境。即使每个字母由单个PNG图像组成,您也可以使用自己自定义的字体反向设计该设计。

3、 Binary Lab

Binary Lab's 动画logo 是这个列表中比较复杂的动画效果之一。它从瓶子的上方拉取数字,并且查看瓶子里对应的数字进行相应的褪色。

动画本身是通过CSS控制的,但这支笔还依赖于 TweenMax库 添加重复数字和自定义alpha转换。所有的一切都非常有创意的使用了CSS和JavaScript的现代网络动画。

4、 Pure CSS3 Stack Overflow

Stack Overflow logo是我最喜欢的logo之一,因为它非常简单,但易于识别。并且这个 片段动画 Stack logo图标只使用 纯CSS3 。

这是迄今为止我见过的最令人印象深刻的纯CSS动画之一,最终产生的logo看起来很像官方的logo,动画在每个主流浏览器中展示起来都很 流畅 。任何一个喜欢纯CSS/CSS3动画的工程师都会喜欢上这个片段。

5、 Monster Energy Logos

Tim Pietrusky的这一系列动画 Monster Energy logos 使用SVG和间隔适中的CSS transitions来实现。如果你想对你的logo也进行类似的褪色效果,你可以自由学习和复制他的代码。

这个logo的所有动画定时直接通过Sass控制,所以这是一个纯CSS动画。你可以通过改变变量来改变速度、淡化颜色,或者其他任何东西。

6、 Subvisual

Subvisual有一个非常独特的logo,由Miguel Palhas实现动画效果。它由logo文本和 S 图标组成。

Logo的一切都是建立于SVG元素上,使操作更容易。虽然绝大多数的动画是通过CSS完成的,但这支笔还依赖于 TweenLite库 的JavaScript。这是一个优雅的效果,可以根据用户动作(悬停,点击等)重复或触发动画效果。

7、 Pixel Logo Animation

Jura允许任何开发人员使用自由像素字体创建自定义像素逐动画效果,这正是CodePen用户Khaosmuhaha在 cpdepen 中使用的。

它使用 HTML canvas 元素操作纯文本,动画由CSS3 animation 属性提供,但它们通过jQuery控制,这使得我们能够顺序操作动画。

这是结合使用canvas元素和webfont的一个很酷的效果。

8、 Alex Aloia Logo

如果你正在寻找一个真正复杂的logo动画,那么你可以看看开发者Alex Aloia写的这个 示例 。使用他的名字作为名称,他创建了一个复杂的SVG形状系列,使用 绘图 效果动画。

使用CSS不能实现整个效果,它需要一些JavaScript转换库,如 DrawSVG 和更流行的 D3.js ,使用开源库来创建这种独一无二的动画是一件很有趣的事情。

9、 Bayleys

Bayleys logo是一个晦涩复杂的动画效果,但它确实有坚实的边缘,使重新创建的标志容易得像馅饼。

Rafael Contreras的动画片段只使用了38行代码。logo本身是使用SVG元素创建的,动画将相应地操作这些标签。很多logo元素在不同的方向移动使得这些logo的动画效果令人着迷。

10、 Nintendo Switch

任天堂的最新游戏的控制台带有一个辉煌的logo动画,他所有的商业广告和这个示例都由 Koto Furumiya创建。

Koto使用SVG重新构建任天堂开关logo,同时使用CSS动画化整个事物。你会相信这个动画效果只需要50行CSS代码吗?

我最赞赏这个logo动画的真实性,它真的匹配任天堂的动画,示例logo可以看出,它能够强有力的下推和反弹回来。

总结

所有这些例子都是免费、开源的,你可以根据自己的项目研究、克隆和操作。我希望你喜欢这些演示,如果你正在寻找更多的CSS动画例子,你可以看看这个 集合 ,看看其他人做了什么。

来自:https://segmentfault.com/a/1190000008600261

一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】

QQ|QQ群:133515734|站长博客|百度网盘|许进龙|手机触屏版|国际动画教程网 ( ICP13037175 )