轩枫阁

首页 / Web前端 (第34页)

基于CSS3实现的纸飞机折叠飞翔动画过程

前言

也许你有注意到本站的logo,点击之后,会产生一个纸飞机飞翔的过程,是一个3D动画效果,目前仅支持webkit内核浏览器预览效果。

demo地址

http://xuanfengge.com/demo/201402/plane

实现原理

整个动画过程包括

消息面板翻转、飞机两翼折叠、飞机平放预备飞行、飞机后退助跑、飞机向前飞翔、整个过程的背景颜色过渡。

简单解析

主要的动画效果(步骤分解状态)使用CSS3的变形(transform)、转换(transition)、动画(animation)、视图距离(perspective)等等新属性实现,并结合js的setTimeout控制动画时间,通过增减css的class来实现整个过程动画。 查看全文

2014/02 22  周六

前端新闻播报-第二期201402

现在来为大家播报一些前端FE近期所发现的技巧。厌倦了陈旧的理论描述,来看看又有什么新技巧吧,绝对新颖

 

webkit语音搜索属性删除

你注意到轩枫阁搜索框右侧的麦克风图标了吗?这是 Chrome 11 开始支持的语音识别功能(在 input 元素中增加「x-webkit-speech」属性实现),现在Chrome打算删除该属性,推荐使用 JS API 来代替。

详细https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/nGFTVcfk8dY

如何使用webkit语音搜索http://www.xuanfengge.com/html5-voice-search.html

`5IV_~[UCRJQTA(TOT](ERF

开发者工具位置

想让开发者工具放到左边吗?Chrome 34 满足你!需要开启chrome://flags/#enable-devtools-experiments,然后在设置中选中「Enable dock to left mode」

变更集https://chromium.googlesource.com/chromium/blink/+/376dc6e

c1608aa0gw1edfle2njqwj20az0cb3zi

chrome噪音标签

Chrome 32 正式版发布,带来了全新的噪音标签显示功能,比如当某个选项卡中在播放声音时就会标示出一个小喇叭。

详见http://chrome.blogspot.com/2014/01/everyone-can-now-track-down-noisy-tabs.html 查看全文

2014/02 21  周五

JavaScript:不再专属于前端开发 即将称霸物联网

前言

Patrick Catanzariti 是一名自由Web开发工程师,近日国外网站sitepoint刊登了一篇他写的《JavaScript Beyond the Web》,文内介绍了JavaScript在物联网中的作用,很有意思。现将文章翻译如下:

短短几年间,在人们眼中JavaScript已迅速成长为最有价值的语言。在Netscape Navigator浏览器初期,Javascript的诞生让我们眼前一亮,我惊奇的发现,我竟然可以修改网页上对话框的文字了。

从那时起,JavaScript成长的速度远远超过了我的预期,我们现在所看到功能强大的Web应用、移动应用、Windows 8 应用,甚至整个服务器都在使用JavaScript。

我认为最激动人心的是这种语言,现在还可以用来控制和监控你的移动电话、开关灯具、机器人,增强Google Glass,以及手或手指之间的感应等。

在这篇文章中,我会介绍一些JavaScript在“物联网”里的应用,让JavaScript开发者从而了解并能从现在开始可以从事这方面的工作。

如果你是一名JavaScript程序员,想通过自己的技术将互联网世界无缝的衔接起来,就要比其他程序员思考的更多,现在身边的一些高科技产品就具备着很多即诱人又有创新性的机遇。 查看全文

2014/02 17  周一

CSS3渐变gradient的应用

前言

在CSS3盛行的年代,我们要学会极致的运用它的属性来装点我们的网站,学会CSS3的渐变就可以做出一些非常炫的效果。

应用点

在没有CSS3之前,为了显示一个渐变而专门制作一个图片,这种不法不但不灵活还增加请求数。那我们能用gradient做些什么呢?做渐变背景、做渐变导航、做按钮、按钮的四态(default、hover、active、focus)、绘制图形、配合CSS3动画做特效等。

Gradient语法

1、线性渐变的语法

对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);}

2、径向渐变的语法

对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);} 查看全文

2014/02 17  周一

javascript的异常处理你了解吗?

前言

异常处理运行在浏览器端Javascript受宿主环境、浏览器插件、运营商劫持、第三方代码等等因素的影响导致,javascript在浏览器端出现各种各样的异常情况。

Error对象及其衍生对象

Error对象有两个最基本的属性:

  • name:错误名称
  • message:错误提示信息

 

除了Error对象,JavaScript还定义了其他6种错误,即存在Error的6个衍生对象

  • EvalError:执行代码时发生的错误
  • RangeError:当一个数值型变量或参数超出有效范围时发生的错误
  • ReferenceError:引用一个不存在的变量时发生的错误
  • SyntaxError:解析代码时发生的语法错误
  • TypeError:变量或参数的类型无效时发生的错误
  • URIError:向encodeURI() 或者 decodeURI() 传入无效参数时发生的错误

捕获异常及其处理

方式一:用try语句捕获必要异常

查看全文

2014/02 16  周日

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子