现在构建一个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动画例子,你可以看看这个集合,看看其他人做了什么。