请您先登录,才能继续操作

阅读更多

5顶
1踩

Web前端

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

2013-05-06 13:35 by 见习编辑 tyygming 评论(7) 有16997人浏览
本文为大家推荐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的话,基本上无所不能了。
只有你想不到,没有他们做不到的。

发表评论

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

相关推荐

  • 带你彻底了解浏览器缓存!

    带你彻底了解浏览器缓存!

  • Windows下的cache-浏览器缓存

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

  • 浏览器缓存cache

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

  • cache 浏览器中的几个参数

    Pragma: no-cache:跟Cache-Control: no-cache相同, Pragma: no-cache兼容http 1.0 , Cache-Control: no-cache是http 1.1。 Pragma: no-cache可以应用到http 1.0 和http 1.1,而Cache-Control: no-cache只能应用于http 1.1. 注意如

  • Cache浏览器

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

  • 深入理解浏览器的缓存机制

    一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来...

  • 浏览器的缓存机制cache-control

    在web网站的开发过程中,浏览器缓存机制是一个比较重要的话题,了解这方面有助于开发以及网站性能的提高. 浏览器缓存分类 1.强缓存: 指浏览器直接从浏览器缓存中读取资源,不请求服务器,状态码显示200,并且size显示from disk cache或from memory cache; 2.协商缓存 指浏览器向服务器发送请求,并且根据request headers中携带的数据判断是否需要从缓存...

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

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

  • 磁盘存储容量计算

    磁盘上的数据都存放于磁道上。磁道就是磁盘上的一组同心圆,其宽度与磁头的宽度相同。为了避免减少干扰,磁道与磁道之间要保持一定的距离(inter-track gap),沿磁盘半径方向,单位长度内磁道的数目称之为道密度(道/英寸,TPI),最外层为0道。 沿磁道方向,单位长度内存储二进制信息的个数叫做位密度。为了简化电路设计,每个磁道存储的位数都是相同的,所以其位密度也随着从外到内而增...

  • 浏览器缓存原理总结

    一、浏览器缓存基本认识分为强缓存和协商缓存1、浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中...

  • 使用jQuery判断一个数组中是否包含某个值

    1、当需要在前端为数组去重的时候,可以使用jQuery的inArray方法来判断。 2、具体操作如下: var array = ['a','ab','abc']; $.inArray('abc',array);下标从0开始,若结果为-1则表示此数组中不存在这个值。

  • cache(缓存)浅析

    cache 缓存

  • 操作系统 — 了解CPU cache

    CPU cacheCache一词源自法语,其原意为"藏匿处,隐藏的地方". Cache被应用于计算机科学之后,专指CPU与主内存之间的存储器高速缓冲器,Cache的出现是为了缓解CPU的存储需求与主内存的存取性能之间越来越大的差距.现代CPU的Cache都是集成在片内的,越靠近CPU流水线的Cache由于需要极其快速的存取速度,只能保持越小的容量,并且单位容量的成本越高.因此,为了进一步缓解需求与...

  • 深入理解Cache

    存储器是分层次的,离CPU越近的存储器,速度越快,每字节的成本越高,同时容量也因此越小。寄存器速度最快,离CPU最近,成本最高,所以个数容量有限,其次是高速缓存(缓存也是分级,有L1,L2等缓存),再次是主存(普通内存),再次是本地磁盘。                          寄存器的速度最快,可以在一个时钟周期内访问,其次是高速缓存,可以在几个时钟周期内访问,普通内存可以在几十个或几...

  • 对于浏览器cache理解

    今天看了coolshell.cn/articles/6470.html 这篇文章   其中有介绍前端的优化,其中包括将多个css或js文件写成一个,这样可以减少客户端浏览器的tcp连接请求。   用firfox的内置功能(右键点击查看详情),查看了下连接请求,发现现在12306确实有50多个请求。   从请求列表中可以发现先发送get请求主页,然后浏览器分别请求js或css文件。   浏览

  • 浏览器查看cache

    浏览器cache查看

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

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

  • 磁盘容量的计算公式

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

  • 浏览器http缓存

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

Global site tag (gtag.js) - Google Analytics