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

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