构建动画HTML和CSS徽标比以往任何时候都容易得多，并且随着JavaScript库的更新，它可以进一步推动网络动画的发展。查看这个包含10个令人难以置信的自定义动画徽标的画廊，这些徽标具有未知实体或世界知名品牌。1.FlowersSVGWeb上最热门的动画趋势是SVG动画，而且会越来越火。这个花朵标志动画是SVG应用的一个很好的例子。标志图标和文本已在HTML的中创建，动画序列由CSS和自动页面加载机制控制。这需要一些特定于SVG的CSS属性，例如stroke-dashoffset，它按顺序推动轮廓以创建这个神奇的动画。2.CarbonLDPCarbonLDP标志非常详细和复杂，但开发人员DavidMcFeders在CSS/Compass上构建了他的动画Carbon标志。这段代码的每一段都可以很容易地定制，从徽标大小到动画速度，它依赖于纯CSS使循环无穷无尽。即使每个字母都包含一个PNG图像，您也可以使用自己的自定义字体对设计进行逆向工程。3.BinaryLabBinaryLab的动画徽标是此列表中较为复杂的动画之一。它从瓶子的顶部拉出数字，然后查看瓶子中相应的数字以相应地淡化。动画本身是通过CSS控制的，但是这支笔还依赖于TweenMax库来添加重复数字和自定义alpha过渡。CSS和JavaScript都非常有创意地用于现代网络动画。4.纯粹的CSS3StackOverflowStackOverflow标志是我最喜欢的标志之一，因为它非常简单但易于识别。此代码段仅使用纯CSS3为Stack徽标图标设置动画。这是迄今为止我见过的最令人印象深刻的纯CSS动画之一，生成的徽标看起来很像官方徽标，并且动画在每个主要浏览器中看起来都很流畅。任何喜欢纯CSS/CSS3动画的工程师都会喜欢这个片段。5.MonsterEnergy标志TimPietrusky的这一系列动画MonsterEnergy标志使用SVG和间隔良好的CSS过渡来实现。如果你也想对你的标志做类似的淡入淡出效果，请随意学习和复制他的代码。这个标志的所有动画时间都是直接通过Sass控制的，所以这是一个纯CSS动画。您可以通过更改变量来更改速度、淡化颜色或其他任何内容。6.SubvisualSubvisual有一个非常独特的标志，由MiguelPalhas制作动画。它由徽标文本和S图标组成。徽标的所有内容均基于SVG元素构建，以便于操作。虽然绝大多数动画是通过CSS完成的，但这支笔也依赖于TweenLite库中的JavaScript。这是一种优雅的效果，可根据用户操作（悬停、单击等）重复或触发动画效果。7.像素徽标动画Jura允许任何开发人员使用免费像素字体创建自定义的逐像素动画效果，这正是CodePen用户Khaosmuhaha在cpdepen中使用的。它使用HTMLcanvas元素操作纯文本，动画由CSS3动画属性提供，但它们是通过jQuery控制的，这使我们可以按顺序操作动画。这是将canvas元素和webfont一起使用的很酷的效果。8.AlexAloiaLogo如果你正在寻找一个非常复杂的标志动画，那么你可以看看这个由开发者AlexAloia编写的例子。他以自己的名字作为标题，创建了一个复杂的SVG形状系列，并使用绘图效果进行了动画处理。整个效果是CSS无法实现的，需要一些JavaScript转换库，比如DrawSVG和比较流行的D3.js，使用开源库来制作这种独一无二的动画是很有趣的。9.BayleysBayleys的标志是一个晦涩而复杂的动画，但它确实有坚实的边缘，使重新创建标志像馅饼一样容易。RafaelContreras的动画剪辑仅使用了38行代码。徽标本身是使用SVG元素创建的，动画将相应地处理这些标签。许多徽标元素朝不同的方向移动，使这些徽标的动画令人着迷。10.NintendoSwitchNintendo最新的游戏机带有漂亮的标志动画，他的所有广告和这个例子都是由KotoFurumiya创作的。Koto使用SVG重新创建了NintendoSwitch徽标，同时使用CSS对整个徽标进行动画处理。你相信这个动画只需要50行CSS代码吗？徽标动画的真实性让我最欣赏的是它与任天堂的动画非常匹配，如示例徽标所示，它具有很强的下压和反弹力。总结所有这些示例都是免费的、开源的，您可以学习、克隆和使用您自己的项目。我希望您喜欢这些演示，如果您正在寻找更多CSS动画示例，可以查看此集合以了解其他人所做的工作。10个令人惊叹的CSS和JavaScript动画徽标示例
[翻译]10AmazingExamplesofCSSandJavaScriptAnimatedLogos相关文章
