如果你在 3 月 23 日左右升级了 compass,你可能会遇到这样的错误:

sass - 3.2.18
compass - 0.12.4
 所以目前的处理方法就是安装原来的版本

gem uninstall compass
gem uninstall sass
gem install sass --version "3.2.10"
gem install compass --version "0.12.2"
这样就可以消除上述错误了。

JX20140226181130

What’s JX.Animate

JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 JavaScript 的 CSS3 动画库,通过 JX 插件的形式提供。
JX.Animate 可以帮助开发者在 JavaScript 代码中方便调用和控制 CSS3 动画,例如动画时长、重复次数、动画缓冲、结束回调等,并且支持播放声音。
TAT.Minren 响应式设计
In CSS3,HTML5,Web开发,移动 Web 开发 on 2014年01月23日 by view: 30,315
10

网上的教程好复杂,我写一个简版的。

简单说呢就针对不同的屏幕分辨率应用不同的 CSS 样式。比如在电脑、Pad 设备上,屏幕比较宽,就可以一行放 2 个 Div。
到了手机上,或者 Pad 竖着拿的的时候,一行就只放 1 个 Div。
这里有 2 个关键点:
一是如何在不修改 Dom 结构的前提下调整布局。
二是如何判断屏幕分辨率并应用对应的 CSS。
以上两点都应该不依赖与 JS。

手边有一台 iMac,听说 cocos2d 比较流行就想尝试一下。

首先到官网看文档,http://www.cocos2d-x.org/wiki

看了 2 天,完全不知所云。我想再 mac 上开发 ios 版本的,结果大部分都是 android 相关的,或这 windows 平台的内容。先看看下载的安装包吧。

下载的 2.2 版本,里面真是程序猿风格,一篇文档说明都木有。既然文档没用就自己试吧。

进入 samples/Cpp/HelloCpp/pro.ios/目录找到一个 Xcode 的工程文件。双击打开,然后运行,居然没有报错,顺利打开模拟器,还能运行。

TAT.Minren 小米 WIFI 预定页面是如何出声的?
In Web开发 on 2013年12月26日 by view: 7,559
5

小米又做了一个成功的营销。在首页上放了 7 个三色的小米随身 WIFI 图片,每个图片是一个琴键,各代表一个音节,按照提示可以弹出《铃儿响叮当》。然后就出现了小米 WIFI 的预订页面。

这个页面估计又要在微博、微信中疯转了。小米的互联网营销技巧实在是无法望其项背。所以这里就谈谈技术实现吧。

TAT.Minren 慎用 DataImageURL 给 DOM 赋值
In HTML5,Web开发 on 2013年12月02日 by view: 5,045
0

最近在更新 JX.Animate 的 Demo,我想让首页的美女图动起来。用的是 Canvas 实现的,过几天大家就可以看到一边移动一边缩放的效果了。

在切换图片的时候,过场动画是用 m×n 个 div 的 CSS3 动画实现的。此时 div 上显示的图片必须要和 Canvas 大图上的一致。

之前是用图片 url 设置 div 背景的方式实现的。于是很自然的想到可以通过 Canvas.toDataURL() 获得一个 DataImageURL,然后沿用原来的逻辑就行了。

现实永远是骨感的。

DataImageURL 字符串必然是一个巨长无比的字符串,用这么长的字符串进行 m×n 次的 DOM 操作,结果就是一场灾难。

最近在学习HTML5 CSS3,印象最深的是 CSS3 的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在 js 中自己管理 timer

本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图片轮播器。不仅效果很酷,而且是女神级的。什么?你问是不是妹子写的?这个我不知道,我说的是这个 Demo 中的图片都是女神呀,性感火辣,丰满妩媚……咳咳,回正题。

Windows8 风格程序支持使用 WPF 和 HTML 两种方式进行编程。本人之前曾使用 WPF 开发过概念版 QQ,现在又在使用 HTML5。两种技术都略懂,略懂。所以将两者做了个比较。虽然 WPF 的命运多舛,应用不太广泛,但技术本身还是有很多亮点的。值得我们学习一下,开阔眼界。
TAT.Minren CSS3 的 roate 与 rotateX 的顺序研究
In CSS3,HTML5 on 2012年11月08日 by view: 11,720
2

我觉得 CCS3 的 transform 中的学问很深,可以出不少面试题了,之前的文章谈到过 perspective 属性的位置问题,我们今天看看 rotate 的顺序,首先看看下面两个 CSS3 的 keyframe 动画:

两个动画的起始状态和结束状态都是是一摸一样的(其实就是原始位置),不同的只不过是 rotate 和 rotateX 的顺序。但是动画效果却有惊人的差别。

TAT.Minren CSS3 Transform 的 perspective 属性
In CSS3,HTML5,Web开发 on 2012年10月29日 by view: 26,379
17

以下两行语句有什么区别?

如果大家不清楚,请听我娓娓道来。

CCS3 中的 Transform 是设置界面样式和动画的一大利器。而且在 Chrome 和 FF 中还支持 3D 变换。IE9 不支持,IE10 支持。