芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
4

13+ 模拟 JavaScript 交互效果的纯 CSS 技术

作者 芒果/分类 代码/发布于 2010-05-22 12:25

在用户界面这一块,使用 JavaScript 总能创造出丰富强大的交互效果。但只需一点想象力和创造力,仅仅通过 CSS 也可以实现相同类型的效果。以下是 13+ 模拟 JavaScript 交互效果的纯 CSS 技术,使我们不再用单一的方式实现需要的交互。你会发现,这些技术有些是非常有用的,而有些则证明能用纯 CSS 更为简单地实现。

如何使用纯 CSS 创建宝丽来相册

css only

使用 CSS3 创建 coda 效果的气泡

css only

使用 CSS 创建折叠菜单

css only

如何使用 CSS3 创建图像画廊

css only

纯 CSS3 悬停选项卡

css only

使用 CSS 创建类 JQuery 幻灯切换

css only

如何用 CSS 创建 Lightbox 弹出对话框

css only

纯 CSS 数据表

css only

CSS 气泡效果

css only

CSS 图片切换

css only

纯 CSS 折线图

css only

CSS3 表单提示

css only

纯 CSS 时间线

css only

英文原稿:13 Pure CSS Techniques for Creating JavaScript-like Interactions | Web Design Ledger
翻译整理:13+ 模拟 JavaScript 交互效果的纯 CSS 技术 | 芒果

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/13-pure-css-techniques-for-creating-javascript-like-interactions/" title="13+ 模拟 JavaScript 交互效果的纯 CSS 技术" rel="bookmark">13+ 模拟 JavaScript 交互效果的纯 CSS 技术 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 4 条群众意见

  1. ?
    Tweets that mention 13+ 模拟 JavaScript 交互效果的纯 CSS 技术 | 芒果 -- Topsy.com /2010-05-23 10:21

    […] This post was mentioned on Twitter by 芒果, Exted Luo. Exted Luo said: http://mangguo.org/13-pure-css-techniques-for-creating-javascript-like-interactions/ […] 回应

    #1
  2. sasumi /2010-05-24 09:26

    不错。有几个是比较实用的。 虽然原理都不难。 回应

    #2
  3. ?
    12 款简化 CSS3 开发的实用工具 | 千里走单骑 /2011-06-13 12:34

    […] 13+ 模拟 JavaScript 交互效果的纯 CSS 技术 (2) […] 回应

    #3
  4. ?
    13+ 模拟 JavaScript 交互效果的纯 CSS 技术 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-07-11 07:34

    […] 转载至:13+ 模拟 JavaScript 交互效果的纯 CSS 技术 | 芒果小站 分类: html, 其它 标签: 临时 CSS3 基本要素概览5 款优秀的 CSS 框架使用 CSS3 创建下拉菜单用 CSS3 实现未来的 Web模块化之 HTML CSS 以及图片使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟CSS 左右两栏自适应布局详解 CSS 的优先权基于 YUI 2.8 的层染色褪色效果打造自己的 Reset.css 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #4

下面我简单说几句