阅读更多

5顶
1踩

Web前端

原创新闻 10 款超棒的 CSS/JavaScript 前端特效

2013-05-06 13:35 by 见习编辑 tyygming 评论(7) 有16992人浏览
本文为大家推荐10款来自极客社区的超棒的前端特效,希望大家会喜欢!以下特效推荐在Firefox中查看。

1.  CSS实现的工厂动画效果

一套设备运作的卡通模拟效果,非常有趣!



在线调试

2.  CSS / javascript实现一个简单的对应效果

当你的鼠标轻轻略过图片,将会自动翻面。



在线调试

3.  CSS实现在墙上的三维画廊效果

一款可以实现3D效果的照片墙。



在线调试

4.  CSS / javascript实现大战骷髅军团小游戏

一个盾牌给你防御,一个牛肉会帮助你加体力!快来试试!



在线调试

5.  一个CSS 实现旋转彩虹圈

可以变换色彩的彩虹圈。



在线调试

6.  CSS 实现的双环LOGO动画

色彩灵活变化的圆圈。



在线调试

7.  JavaScript实现自我组织粒子效果

单击鼠标以添加新的粒子进入系统,这是相当有趣的,看看会发生什么!



在线调试

8.  JavaScript实现2D游戏版的快速飞行

使用鼠标在页面上移动视图里可调整宽度和高度的街区的随机值及间隔。



在线调试

9.  CSS、JavaScript实现的最后的统计

倒计时!开始啦!



在线调试

10.  JavaScript实现的二维高度场液体效果

用JavaScript来实现二维立体效果。



在线调试

Via 极客标签
来自: www.gbin1.com
5
1
评论 共 7 条 请登录后发表评论
7 楼 yy232 2013-05-09 15:46
好。。。。。。。。。。。
6 楼 yeshuang 2013-05-08 09:10
mark一下
5 楼 DOTA_liu_bin 2013-05-07 18:27
碉堡了 
4 楼 kuoge110 2013-05-07 11:33
收藏下  有空自己搞一搞
3 楼 jianmu 2013-05-07 09:45
mark一下。好东西
2 楼 cony138 2013-05-07 09:18
唉,都是flash玩剩下的,以前用flash来做,成本低兼容性高,现在非要换成html来做,真不知道除了seo方便,还有什么别的好的
1 楼 chenhailong 2013-05-07 08:39
很好,本来CSS和JavaScript就非常的强大,在加上Canvas的话,基本上无所不能了。
只有你想不到,没有他们做不到的。

发表评论

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

相关推荐

  • 浏览器页面缓存 - Cache【性能篇】

    如果【停用缓存】被勾选了,浏览器发送的请求中就会自带 Cache-Control:no-cache和Pragma:no-cache两个请求头。会强制要求缓存把请求提交给原始服务器进行验证 (协商缓存验证)。假如 Cache-Control 在请求头中不存在的话,Pragma:no-cache的行为与 Cache-Control: no-cache 一致。在Demo演示之前,切记将浏览器中的 【网络 -> 停用缓存】选项不要勾选。否则浏览器不会从本地缓存取数据。

  • 浏览器缓存机制与分类(一)

    处理好浏览器缓存对提升系统的性能有很大的帮助,为什么要使用缓存,我们一般请求资源后直接使用,当我们再次请求资源时,还要继续从服务器拿到数据吗?答案不以为然,当第一次请求资源后,可以进行缓存,然后再次请求资源时可以直接从缓存中读取,提高了效率。

  • Windows下的cache-浏览器缓存

    文章目录cache解释操作一操作二学习相关网站总结 cache 解释 cache 即缓存,是 IT 领域一个重要的技术。我们此处提到的 cache 主要是浏览器缓存。 根据 HTTP 报文的缓存标识进行的浏览器缓存主要是用于性能优化中。简单高效的工作方式可以缩短网页请求资源的距离,减少延迟,同时缓存文件可以重复使用,因此对于节约资源,降低网络负荷也有一定的作用。 操作一 打开 Chrome 或 Firefox 浏览器,访问 https://qige.io ,接下来敲 F12 键 或 Ctrl + Shift

  • 浏览器缓存:memory cache、disk cache、强缓存协商缓存等概念

    文章目录分类memory cachedisk cacheService WorkerPush Cache缓存过程强缓存1、Expires2、Cache-ControlExpires 和 Cache-Control 的差别协商缓存Last-Modified和If-Modified-SinceETag和If-None-Match协商缓存的两者对比实际使用策略用户行为如何触发缓存 分类 从缓存位置上来说...

  • 浏览器缓存cache

    浏览器缓存cache一、简介二、操作四、参考资料 一、简介 ✍ cache 即缓存,是 IT 领域一个重要的技术。我们此处提到的 cache 主要是浏览器缓存。 浏览器缓存是根据 HTTP 报文的缓存标识进行的,是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 二、操作 2.1 打开 Chrome 或 Firefox 浏览器,访问 https://qige.io ,接下来敲 F12 键 或 Ctrl +

  • 浏览器缓存机制

    浏览器缓存 浏览器缓存的知识是前端工程师必须要掌握的,因为这些知识直接影响到你的页面的用户体验,影响到你的页面的加载策略。接下来将要详细的讲述浏览器缓存的概 念和原理,新人要仔细阅读,甚至要多次反刍,缓存的知识除了和浏览器有关,还涉及到HTTP协议,所以这也是比较难于掌握的内容。 一般在硬件中,缓存在硬件中分一级缓存,二级缓存。但在软件中的缓存却不一样。 狭义上讲缓存就叫高速缓存,严格讲就是

  • Cache浏览器

    对Cache进行浏览并管理。例子 //http://aspalliance.com/aldotnet/examples/cacheviewer.aspx//http://scottwater.comprivate void Page_Load(object sender, System.EventArgs e){ if(!IsPostBack) {  hlRefresh.NavigateUrl

  • 彻底吃透浏览器的缓存机制!

    作者 | 浪里行舟 责编 | 胡巍巍 前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请...

  • 浏览器缓存知识基础

    作为前端开发工程师,浏览器缓存机制用已经成了我们的必修课,虽然我们能做的并不多,但是怎样合理的利用缓存机制优化我们的站点、应用的效率依然有不小的可控制空间。 web端的缓存有很多种,下面简单的介绍。 web缓存的种类 1 数据库缓存 数据库缓存是一种数据库层面的缓存方案。当web应用的关系比较复杂,数据库中的表很多的时候,如果频繁进行数据库查询,很容易导致数据...

  • 位、字节、字之间的关系

    位:"位(bit)"是电子计算机中最小的数据单位。每一位的状态只能是0或1。  字节:8个二进制位构成1个"字节(Byte)",它是存储空间的基本计量单位。1个字节可以储存1个英文字母或者半个汉字,换句话说,1个汉字占据2个字节的存储空间。  字:"字"由若干个字节构成,字的位数叫做字长,不同档次的机器有不同的字长。例如一台8位机,它的1个字就等于1个字节,字长为8位。如果是一台16位机,那么,它...

  • 浏览器查看cache

    浏览器cache查看

  • 第一课,ARM芯片的时钟体系

    注:以下内容学习于韦东山老师arm裸机第一期视频教程    一. 2440时钟简介        1.1 2440是一个SOC(system on chip)系统,不仅有很多CPU,还有很多外设,在2440芯片手册有系统框架图如下:                            2440框架图中,不仅有CPU,而且有很多外设,其中外设分为两部分,一部分是AHB总线,一部分是APB总线   ...

  • 磁盘容量的计算公式

    公式: 有效储存区域=(外直径-内直径)÷2 磁道数= 圆柱面数量=有效储存区域×磁道密度 总磁道数= 记录面数×磁道密度×有效储存区域 每磁道的信息量=内层位密度×内层周长 面信息量=磁道数×每磁道信息量 非格式化盘组总容量=面信息量×面数 格式化容量=总磁道数×每道扇区数×扇区容量 平均数据传输速率=最内圈直径×3.14×位密度×盘片转速 平均等待时间 eg: 如...

  • 实践这一次,彻底搞懂浏览器缓存机制

    戳上方蓝字 “程序猿杂货铺” 关注我 并置顶星标!你的关注意义重大!阅读文本大概需要 12 分钟。原文 | https://dwz.cn/aIyiKa6c整理 | 程序...

  • 操作系统内存管理、Cache调度策略学习

    原文  http://www.cnblogs.com/LittleHann/p/4012086.html 主题 操作系统 HTML 目录 0. 引言 1. 内存管理的概念 2. 内存覆盖与内存交换 3. 内存连续分配管理方式 4. 内存非连续分配管理方式 5. 虚拟内存的概念、特征及其实现 6. 请求分页管理方式实现虚拟内存 7. 页面置换算法 8. 页面分配策略 9. 页面

  • 浏览器http缓存

    1.http缓存分为强缓存和协商缓存 强缓存: 强缓存命中不会发送请求到服务器端,直接从本地缓存中获取资源,状态码200 ( from cache ) 协商缓存:协商缓存会发送请求到服务器,服务器通过请求头部字段来验证资源是否命中协商缓存,如果命中,则返回状态码304 ( not modified ),通知浏览器从缓存中获取资源 2.根据响应头部的字段确定浏览器缓存策略 2.1Cac...

  • 浏览器(Cache)的缓存逻辑(HTTP条件请求)

    浏览器(Cache)的缓存逻辑(HTTP条件请求) 1. 浏览器缓存 一般来说,一个GET请求在目标资源存在的情况下会返回一个状态码为“200 OK”的响应,目标资源的内容将直接存放在响应报文的主体部分。如果资源的内容不会轻易改变,那么我们希望客户端(如浏览器)在本地缓存获取的资源。对于针对同一资源的后续请求来说,如果资源内容不曾改变,那么资源内容就无须再次作为网络荷载予以响应。 确定资源是否发生变化可以采用两种策略。第一种就是让资源的提供者记录最后一次更新资源的时间,资源的荷载内容(Payload)和.

  • Java 判断数组是否包含某个值

    参照链接:http://www.hollischuang.com/archives/1269查找效率对比表:数组容量查找次数ListSetLoopBinarySearchArrayUtils610331390387181457134738(有序)13755610000042319492204266488726600711627486(有序)3777349101039720592673922571无...

  • 如何使页面不被浏览器Cache保留

    使页面不被浏览器Cache保留

Global site tag (gtag.js) - Google Analytics