现在构建一个html和CSS的动画logo比以前容易多了,配合更新的JavaScript库可以进一步推动网络动画的发展。
看看这个画廊的10个令人难以置信的自定义动画logo,它们展示的是一些未知的实体或者世界知名品牌。
web上最热门的动画趋势是 SVG annimation ,它将越来越活人,这个 花标志 动画是SVG在行动上的一个很好的例子。
Logo的图标和文字已在HTML中的<svg>中创建,动画的顺序通过CSS和自动的pageload机制控制。这需要一些SVG特定的CSS属性,如 stroke-dashoffset ,它按顺序推动轮廓运动来创建这个神奇的动画效果。
Carbon LDP logo是相当详细和复杂的,但开发人员David McFeders把他的 动画Carbon logo 建立在CSS/Compass上。
每一块这样的代码都很容易从标志尺寸到动画速度进行自定义,它依赖于纯CSS,使循环无止境。即使每个字母由单个PNG图像组成,您也可以使用自己自定义的字体反向设计该设计。
Binary Lab's 动画logo 是这个列表中比较复杂的动画效果之一。它从瓶子的上方拉取数字,并且查看瓶子里对应的数字进行相应的褪色。
动画本身是通过CSS控制的,但这支笔还依赖于 TweenMax库 添加重复数字和自定义alpha转换。所有的一切都非常有创意的使用了CSS和JavaScript的现代网络动画。
Stack Overflow logo是我最喜欢的logo之一,因为它非常简单,但易于识别。并且这个 片段动画 Stack logo图标只使用 纯CSS3 。
这是迄今为止我见过的最令人印象深刻的纯CSS动画之一,最终产生的logo看起来很像官方的logo,动画在每个主流浏览器中展示起来都很 流畅 。任何一个喜欢纯CSS/CSS3动画的工程师都会喜欢上这个片段。
Tim Pietrusky的这一系列动画 Monster Energy logos 使用SVG和间隔适中的CSS transitions来实现。如果你想对你的logo也进行类似的褪色效果,你可以自由学习和复制他的代码。
这个logo的所有动画定时直接通过Sass控制,所以这是一个纯CSS动画。你可以通过改变变量来改变速度、淡化颜色,或者其他任何东西。
Subvisual有一个非常独特的logo,由Miguel Palhas实现动画效果。它由logo文本和 S 图标组成。
Logo的一切都是建立于SVG元素上,使操作更容易。虽然绝大多数的动画是通过CSS完成的,但这支笔还依赖于 TweenLite库 的JavaScript。这是一个优雅的效果,可以根据用户动作(悬停,点击等)重复或触发动画效果。
Jura允许任何开发人员使用自由像素字体创建自定义像素逐动画效果,这正是CodePen用户Khaosmuhaha在 cpdepen 中使用的。
它使用 HTML canvas 元素操作纯文本,动画由CSS3 animation 属性提供,但它们通过jQuery控制,这使得我们能够顺序操作动画。
这是结合使用canvas元素和webfont的一个很酷的效果。
如果你正在寻找一个真正复杂的logo动画,那么你可以看看开发者Alex Aloia写的这个 示例 。使用他的名字作为名称,他创建了一个复杂的SVG形状系列,使用 绘图 效果动画。
使用CSS不能实现整个效果,它需要一些JavaScript转换库,如 DrawSVG 和更流行的 D3.js ,使用开源库来创建这种独一无二的动画是一件很有趣的事情。
Bayleys logo是一个晦涩复杂的动画效果,但它确实有坚实的边缘,使重新创建的标志容易得像馅饼。
Rafael Contreras的动画片段只使用了38行代码。logo本身是使用SVG元素创建的,动画将相应地操作这些标签。很多logo元素在不同的方向移动使得这些logo的动画效果令人着迷。
任天堂的最新游戏的控制台带有一个辉煌的logo动画,他所有的商业广告和这个示例都由 Koto Furumiya创建。
Koto使用SVG重新构建任天堂开关logo,同时使用CSS动画化整个事物。你会相信这个动画效果只需要50行CSS代码吗?
我最赞赏这个logo动画的真实性,它真的匹配任天堂的动画,示例logo可以看出,它能够强有力的下推和反弹回来。
所有这些例子都是免费、开源的,你可以根据自己的项目研究、克隆和操作。我希望你喜欢这些演示,如果你正在寻找更多的CSS动画例子,你可以看看这个 集合 ,看看其他人做了什么。
来源: http://www.open-open.com/lib/view/open1488976504244.html