资讯频道 → Web前端
阅读更多

0顶
0踩

Web前端

翻译新闻 8个令人叹为观止的基于HTML5的信息图

2012-02-06 17:37 by 副主编 wangguo 评论(0) 有4324人浏览
html5 JavaScript CSS 信息图
信息图使用图形或各种可视化元素来展示信息、数据或知识，这些图表可以让用户更容易接受和掌握作者想传递的内容。

本文所带来的这些信息图不是通常所见的静态图片，而是使用HTML、CSS3和JavaScript所创建，通过动画和互动的形式，提供了非常有意义的信息。希望能为你的Web开发或设计工作带来一些灵感。

1.  State of The Internet

互联网正在飞速地发展、膨胀，同时也越来越移动化。这个动态的信息图展示了每时每刻互联网中正在发生的变化，这些数据在不断变化着。



2.  Is the Internet Awake?

该信息图以动态气泡图形式展示了25个国家和地区白天、晚上宽带用户的数量情况。



3.  Intacto 10 Years of History

该信息图以星际旅行的形式展示了互联网2001年到2012年的发展情况。



4.  Future of Car Sharing

汽车共享（Car Sharing）发展情况信息图。



5.  Sandalous Dirt

Twitter社区所有热门对话和主题统计。



6.  Organized Crime: THe World's Largest Social Network

复杂的世界犯罪网络信息图。



7.  How many slaves work for you?

互动型信息图，将根据你输入的不同问题，计算为你工作的奴隶数量。



8.  You VS. John Paulson

和超级商人约翰•保尔森比较你的收入。



英文原文：8 Amazing Interactive Infographics Created With HTML, CSS and Javascript
  • 大小: 9 KB
  • 大小: 7.3 KB
  • 大小: 13.8 KB
  • 大小: 23.2 KB
  • 大小: 30.2 KB
  • 大小: 33.5 KB
  • 大小: 11.9 KB
  • 大小: 18.7 KB
0
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 50个令人叹为观止的JavaScript应用站点

    随着诸如 jQuery, Mootools, Prototype 一类的 JavaScript 框架的崛起，Web 开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript，却拥有 Flash 一样的绚丽效果。在很多 Web ...

  • 5款最佳替代Sketch软件，第一款简直令人叹为观止！

    Sketch是Mac平台上专门为用户界面设计的...本文盘点了5个Sketch替代软件，分析了使用价格、系统要求、操作难度和云协作能力。总有一个适合你！如果你想在Windows系统中有SketchUI设计的操作体验，那就必须是即时设计。

  • 20个专业H5(HTML5)动画工具推荐

    20个专业H5(HTML5)动画工具推荐 目录20个专业H5(HTML5)动画工具推荐AnimateMateGranimFLIPStarability.cssAnimsitioniTypedMojsCountUpAnimeEmber Burger MenuHTML5 MakerHYPE3Google Web ...

  • 二十八个 HTML5 特性与技巧

    信息技术瞬息万变。如果你不关心这种变化，...1. New Doctype 你还在使用令人讨厌的难记的XHTML文档类型声明吗？ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 如果还在用，为什么呢？如同Douglas Qua

  • 基于HTML和css的静态网页仿写

    具体效果为: 采用的技术主要有： position定位 浮动布局 弹性盒子布局 a链接 伪类 表格表单等等 ...首先全局设置为： ...html,body{ width: 100%; height: 100%; } #footer{ width: 100%; he

  • 50个令人叹为观止的JavaScript应用站点[转]

    随着诸如 jQuery, Mootools, Prototype 一类的 JavaScript 框架的崛起，Web 开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript，却拥有 Flash 一样的绚丽效果。在很多 Web ...

  • 50个令人叹为观止的JavaScript应用站点（转载）

    随着诸如 jQuery, Mootools, Prototype 一类的 JavaScript 框架的崛起，Web 开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript，却拥有 Flash 一样的绚丽效果。在很多 Web ...

  • 必须知道的28个HTML5特性、技巧

    信息技术瞬息万变。如果你不关心这种变化，所掌握...1. New Doctype 你还在使用令人讨厌的难记的XHTML文档类型声明吗？  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 如果还在用，为什么呢？如同D

  • 28个HTML5小说明

    1. New Doctype 你还在使用令人讨厌的难记的XHTML文档类型声明吗？ 如果还在用，为什么呢？如同Douglas Quaid所说，转到新的HTML5这种文档类型吧，它会使你看起来更年轻。实际上，你当真知道XHTML的文档类型声明...

  • 将基于jQuery的惰性图像加载更新到IntersectionObserver

    快进到2018年，除了Safari和IE之外，到处都支持“ Intersection Observer API ”，因为Safari和IE令人叹为观止。 我们将在稍后讨论该问题。 Following Dean Hume's blog post on the topic, I start with my images...

  • webgl1到webgl2_9个令人振奋的WebGL演示

    这是九个令人叹为观止的演示，它们将恢复您对客户端矢量图形动画的信心。 1. Chrome世界迷宫 (1. Chrome World Maze) Chrome World Maze is one of the flagship Chrome experiments. With Chrome World Maze, you ...

  • 基于强化学习的智能机器人路径规划算法研究（附代码）

    上图给出一个格状环境，每个箭头代表主体可采取的一个动作，从一个状态转移到另一个。每个箭头关联的数值代表主体执行该动作后的立即奖励r(s,a)。状态G可以看成是目标状态，主体只有进入该状态才有大于0的奖励值，...

  • 令人叹为观止的JavaScript应用站点

    开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript，却拥有 Flash 一样的绚丽效果。在很多 Web 开发者看来，Flash 并不是他们的首要选择，因为 Flash 至今对搜索引擎仍是...

  • 介绍一款令人叹为观止的Flex网络操作系统

    基于B/S结构的WindowsXP系统、Flex网络操作系统、浏览器操作系统、仿WindowsXP的Web系统、在线桌面系统。……以下的截图，不是我的计算机Windows桌面，也不是我在远程登录计算机，而是在浏览器上运行的Web系统。点击...

  • 【java毕业设计】应急救援物资管理系统源码（springboot+vue+mysql+说明文档）.zip

    项目经过测试均可完美运行！ 环境说明： 开发语言：java jdk：jdk1.8 数据库：mysql 5.7+ 数据库工具：Navicat11+ 管理工具：maven 开发工具：idea/eclipse

  • 基于java的音乐网站答辩PPT.pptx

    基于java的音乐网站答辩PPT.pptx

  • 基于Flexsim的公路交通仿真系统.zip

    基于Flexsim软件开发的仿真系统，可供参考学习使用

  • weixin073智慧旅游平台开发微信小程序+ssm后端毕业源码案例设计.zip

    weixin073智慧旅游平台开发微信小程序+ssm后端毕业源码案例设计 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。

  • python017基于Python贫困生资助管理系统带vue前后端分离毕业源码案例设计.zip

    python017基于Python贫困生资助管理系统带vue前后端分离毕业源码案例设计 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。

  • 【创新未发表】Matlab实现粒子群优化算法PSO-GRU实现风电数据预测算法研究.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手

Global site tag (gtag.js) - Google Analytics