10 个优质的 CSS 与 JS LOGO 动画示例

   <p style="text-align:center"><img src="https://simg.open-open.com/show/d142a274dd0fdb517b376aee3cf88e0a.jpg"></p>    <p>10 个优质的 CSS 与 JS LOGO 动画示例</p>    <p>利用 HTML 和 CSS 制作 LOGO 动画要比以前更容易，通过使用最新的 JavaScript 库也能够使网页动画制作的更加精良。</p>    <p>在本文中，我们将与大家分享 10 个让人印象深刻的世界知名品牌与未知实体的自定义 LOGO 动画示例。一起来 Enjoy 吧！</p>    <h2>1. Flowers SVG</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9e519fd93b55c92f6a2385fae3bae0c3.gif"></p>    <p>SVG 动画 作为网上最热门的动画趋势之一，备受大家的关注。而 这个花的 LOGO 动画 便是一个很好的 SVG 动画示例。</p>    <p>我们可以看到，此 LOGO 的图标和文字在 <svg> 标签内编写，通过 CSS 来控制动画，并可以自动的完成页面的加载。当然，需要一些 SVG 特定的 CSS 属性支持，例如 stroke-dashoffset （译者：表示虚线的起始偏移），它会按顺序来推动轮廓的运动，进而实现了精美的动画效果。</p>    <h2>2. Carbon LDP</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6e35cfbad754cf707fa801b90fdc0953.gif"></p>    <p>Carbon LDP 的 LOGO 动画相当的复杂。但是开发者 David McFeders 通过 CSS/Compass 实现了 Carbon 的 LOGO 动画 ，从而也提升了它的逼格。</p>    <p>无论是 LOGO 的大小，还是动画的速度都很容易设置。它由纯 CSS 实现，并保持着无限的循环。虽然，LOGO 的字母是一张 PNG 图片，但你也可以随时利用自己设计的字体进行逆向工程。</p>    <h2>3. Binary Lab</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e8aad92dc93bd69636cc7cfab69adca6.gif"></p>    <p>Binary Lab 的 LOGO 动画 同样是本文中比较复杂的动画效果之一。我们可以看到它的效果：从烧瓶里拉出的数字，在 LOGO 的上方不断的消失。</p>    <p>动画效果是由 CSS 控制的。同时，这个作品依赖了 TweenMax 库 来添加重复的数字，并完成自定义的 alpha 转换。作者很有创意的利用 CSS 与 JS 实现了这个酷炫的 Web 动画效果。</p>    <h2>4. Pure CSS3 Stack Overflow</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/041556d27aa1cb47053951b6b13bf19c.gif"></p>    <p>Stack Overflow 的 LOGO 是我最喜欢的 LOGO 之一，因为它的设计不仅简单，而且易识别。而 这个作品 仅用 CSS3 将 Stack Overflow 的 LOGO 进行了动画效果的实现。</p>    <p>这是迄今为止我看到的最令人印象深刻的纯 CSS 动画之一。最终的展现也与官方的 LOGO 很搭，同时在主流浏览器中 动画都可以流畅的运行 。相信，任何喜欢 CSS / SCSS 动画的朋友都会喜欢上这个作品。</p>    <h2>5. Monster Energy Logos</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7e11a7af0dfc979b009d9064e8b8e9ae.gif"></p>    <p>这个作品是由 Tim Pietrusky 利用 SVG 和均匀的 CSS 转换实现的怪物能量 LOGO 系列动画 。如果你也打算在 LOGO 上实现淡入淡出的特效，就可以复制他的代码来学习。</p>    <p>它是一款纯 CSS 实现的动画，所有的动画时间都是由 SCSS 直接进行调控。同时，你也可以通过更改变量来调节动画的速度，淡化颜色。</p>    <h2>6. Subvisual</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a4a2c4bd81d7a9492b404ba1596c69dd.gif"></p>    <p>Subvisual 团队拥有非常独特的 LOGO，而开发者 Miguel Palhas 则赋予了它酷炫的 动画 效果。你会发现构成它的动画效果有两个因素，即 LOGO 的文字和“ S ”形图标。</p>    <p>作品是基于 SVG 元素构成的，也使操纵更简单。虽然作品中的大多数动画都是基于 CSS 编写的，但它也依赖 JavaScript 库： TweenLite 。同时，这个作品可以根据用户的操作来重复或触发动画效果。（悬停、点击等）</p>    <h2>7. Pixel Logo Animation</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/976cb8baf460d51b15bbe3416a44a68e.gif"></p>    <p>通过使用免费的像素字体，任何开发人员都可以制作出自定义的像素动画。而 <a href="/misc/goto?guid=4959740814975099121" rel="nofollow,noindex">这个作品</a> 就是由 CodePen 的用户 Khaosmuhaha 所制作的。</p>    <p>他通过 HTML Canvas 元素进行纯文本的操作，动画效果则是由 CSS3 的 animation 属性进行驱动，而 jQuery 则控制了全部。所以，我们所见的连续像素动画就这样实现了。</p>    <p>显然，这是一个利用 Canvas 元素与 webfont 构成的炫酷的作品。</p>    <h2>8. Alex Aloia LOGO</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/536cdccef50ee8636a86f26831065f33.gif"></p>    <p>如果你正在寻找一个真正复杂的 LOGO 动画，可以看看开发者 Alex Aloia 制作的 这个示例 。在作品中，作者使用了他的名字作为品牌名称，并将一系列复杂的 SVG 形状通过绘图的动画效果展现出来。</p>    <p>作品的整体效果只通过 CSS 来实现是不太可能的，还需要一些 JS 库 （ DrawSVG 和更流行的 D3.js ）的支持。但是，利用开源库来实现这种独一无二的动画，还是非常有趣的。</p>    <h2>9. Bayleys</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7a0eb41429aaf6bf8aa5e6921f1caa9d.gif"></p>    <p>Bayleys 的 LOGO 动画的选择，有些令人费解。但 LOGO 厚实的边缘使重制变得易如反掌。开发者 Rafael Contreras 仅通过 38 行代码便实现了 动画 效果。</p>    <p>LOGO 是基于 SVG 标签制作的，动画效果则是操纵相应的标签来实现。而在不同的方向移动的众多 LOGO 元素，使动画令人着迷。</p>    <h2>10. Nintendo Switch</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4be0259ad5f63a8d752a29432f128a78.gif"></p>    <p>这是来自任天堂最新款游戏机的一个 LOGO 动画。而开发者 Koto Furumiya 在 CodePen 上实现了它们广告片中的 动画 效果。</p>    <p>Koto 使用 SVG 重制了任天堂 Switch 的 LOGO，并用 CSS 实现了它的动画效果。你会相信这个动画只需要 50 行的 CSS 代码吗？</p>    <p>另外，不得不提这个动画效果确实很逼真。强有力的下推与反弹回升效果，确实与任天堂 Switch 的开机动画相吻合。</p>    <h2>最后</h2>    <p>今天分享的所有示例都是免费与开源的，希望你能将它们应用在你自己的项目上。同时，也希望你能喜欢这些 Demos。如果你正在寻找更多关于 CSS 动画的示例，也可以了解下这个 合辑 。</p>    <p>感谢你的阅读。</p>    <p>注：</p>    <ol>     <li>本文版权归原作者所有，仅用于学习与交流。</li>     <li>如需转载译文，烦请按下方注明出处信息，谢谢！</li>    </ol>    <p> </p>    <p>来自：http://www.jianshu.com/p/b204e854a942</p>    <p> </p>