10个css动画,10个精妙的CSS和Javascript动画Logo的示例(上)

Python部落(python.freelycode.com)组织翻译，禁止转载，欢迎转发。

Jake Rocheleau，2017年3月6日

如今使用HTML和CSS构建动画Logo比以往更容易，且使用更新的JavaScript库使得进一步推动网页动画的界限成为可能。

请浏览下面这个由不知名人士和世界知名品牌提供的10个精妙的自定义动画Logo示例的集合。

1.花SVG

网络上最热门的动画趋势之一是SVG动画。这是一个不断增长的兴趣话题，这个花Logo动画就是SVG的一个很好的实例。

Logo的图标和文字在HTML标记中的标签内创建。然后按序的动画由CSS控制，并在页面加载上实现自动化。这需要一些SVG特定的CSS属性，如stroke-dashoffset，它按顺序推动轮廓运动，以创建这个精彩的动画效果。

HTML:

CSS:

2.碳LDP

这一碳LDP Logo相当详细复杂。但是，开发者David McFeders通过建立在CSS/Compass上的动画碳Logo将其提升到了另一层面。

每段代码可对从Logo大小到动画速度的各项参数进行定制。它建立在纯CSS中，并被设计为无限循环。这些字母是由一个PNG图像组成的，但您也可以随时对该设计进行逆向工程并使用自己的自定义字体。

HTML：

SCSS:

3.二进制实验室

二进制实验室的动画Logo是这个列表中更复杂的动画效果之一。数字从烧瓶中升腾而出并在上方淡化消失。

动画本身是通过CSS控制的。但是这个项目也依赖于TweenMax库来添加重复数字和自定义的alpha过渡。所有这一切都创意性地使用CSS和JavaScript来创建现代网络动画。

HTML:

CSS:

JS:

4.纯CSS3堆栈溢出

堆叠溢出标志是我最喜欢的一个，因为它很简单但独特。而这个使堆栈标志图标动画化的片段使用的仅是纯CSS3。

这是迄今为止我看到的最令人印象深刻的纯CSS动画之一。最终的输出确实看起来像官方标志，且动画在主流浏览器中显示均很平滑。任何喜欢纯CSS/SCSS动画的人都会喜欢这段代码片段。

HTML:

SCSS:

5.怪物能量标志

Tim Pietrusky使用SVGs和具有良好间距的CSS过渡属性动画化这一怪物能源系列Logo。如果您想要Logo有类似的淡化褪色效果，他的代码可供学习采用。

所有的动画时序都是通过Sass直接控制的，这使得它成为纯CSS动画。但是您可以改变变量来改变速度，淡化颜色，或者其他任何参数。

HTML:

SCSS:

JS:

译者：Chara英文原文：https://1stwebdesigner.com/css-javascript-animated-logos/

译者：Chara

10个css动画,10个精妙的CSS和Javascript动画Logo的示例(上)相关推荐

JavaScript动画实现基本原理
前言现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径有两种.一种是通过操作JavaScript间接操作 ...
用 65 行代码实现 JavaScript 动画序列播放
最近在给学生上课,上周六的第一堂课是关于 JavaScript 动画的内容,其中包括一些简单的动画,比如匀速或者匀加/减速的运动,也包括复杂一些的组合动画.而动画的基本原理,在我之前的文章[1]已经有 ...
10个顶级的CSS和Javascript动画框架推荐
在网站中嵌入动画已成为近年来的一个设计趋势,许多公司都已开始转向并拥抱HTML5.CSS3和JavaScript这个技术"三人组".尽管这些技术还不能制作一些非常复杂的动画(像fl ...
HTML5期末大作业：绿色环境保护网站设计(10页) 带flash动画带背景音HTML+CSS+JavaScript
HTML5期末大作业:绿色环境保护网站设计(10页) 带flash动画带背景音HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计源码HT ...
10 个 GitHub 上超火的 CSS 技巧项目，找到写 CSS 的灵感！
大家好,我是你们的超级猫,一个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧 ???? ~ 简介一般人没事的时候刷刷朋友圈.微博.电视剧.知乎,而有些人是没事的时候 ...
10个前端开发人员必须知道的CSS框架
对于UI / UX设计人员而言,要制作一个在每个浏览器上都看起来不错的漂亮网站不是一件容易的事.在创建网站布局并使其美观时,开发人员必须考虑所有Web浏览器和移动视图. 恐惧始终存在于内部,如果设计在 ...
css颜色rgba代码对照表_改善 CSS 的 10 个最佳实践
戳蓝字「前端技术优选」关注我们哦! CSS 看起来是一种非常直接且不易犯错的语言.只需要添加规则以对网站进行样式设置就可以了,对吗?对于只需要几个 CSS 文件的小型站点,可能是这种情况.但是在 ...
css 倒三角_【译】改善 CSS 的 10 个最佳实践
CSS 看起来是一种非常直接且不易犯错的语言.只需要添加规则以对网站进行样式设置就可以了,对吗?对于只需要几个 CSS 文件的小型站点,可能是这种情况.但是在大型程序中,这样可能会使样式迅速失控.如何 ...
css 倒三角_改善CSS的10种最佳做法
CSS似乎是一种非常简单的语言,很难在其中犯错误.你只需添加样式规则,就可以对网站进行样式设置了,对吗?对于只需要几个CSS文件的小型网站,情况可能就是这样.但是在大型应用程序中,样式可能会迅速失控. ...

10个css动画,10个精妙的CSS和Javascript动画Logo的示例(上)

10个css动画,10个精妙的CSS和Javascript动画Logo的示例(上)相关推荐

最新文章

热门文章