CSS3实战 笔记8-动画设计

transform

设置变形函数,可以是一个或多个变形函数列表。

  • matrix() 矩阵变换
  • translate() 移动元素对
  • scale() 缩放元素
  • rotate() 旋转元素
  • skew() 倾斜对象

transform-origin

CSS变形的原点默认是对象的中心点,可以通过此属性重新定义。

transition

动画转换过程,例如渐现、渐弱等。

  • transition-property 定义转换动画的名称,例如 background-color
  • transition-duration 定义转换动画的时长
  • transition-delay 定义动画的延迟时间
  • transition-timing-function 定义动画的效果,例如 ease、linear等

animation

定义动画

  • animation-name 定义动画名称
  • animation-duration 定义动画时长
  • animation-timing-function 定义播放方法,例如 ease、linear等
  • animation-delay 定义动画的延迟时间
  • animation-iteration-count 定义动画播放的次数
  • animation-direction 定义动画播放的方向

实战练习源码

CSS3实战 笔记7-渐变设计

gradient

  • type 定义渐变类型,linear(线性渐变) 或 radial(径向渐变)
  • point 定义渐变的起点和结束点,支持 数值、百分比、关键字等,例如 0,0 left,top。
  • [radius] 当定义径向渐变时,设置渐变的长度,参数为数值。
  • [stop] 定义渐变色和步长,包含三个类型值,开始的颜色使用 from(color value),结束的颜色使用 to(color value),颜色的步长使用 color-stop(value, color value)。

实战练习源码

目前为止找到最好的移动端调试工具-debugGap

一些牢骚

  • 在桌面端调试目前已经很方便了,结构查看、CSS实时修改、网络请求、断点调试、性能检测、控制台…

  • 但在移动端,额.. 仿佛又回到了IE时代,最方便也只能到处 alert 来调试。

  • 当然也可以安装虚拟机、Android、IOS真机远程调试等办法,但我不喜欢,我是个怕麻烦的人。

  • 最后找到这一款应用 - DebugGap,还是基于 node-webkit 的,node.js爱好者表示\(^o^)/~。

阅读全文

CSS3实战 笔记5-完善的和模型和UI设计

border-color

  • CSS3 增加了这个属性,使用它可以为边框设置更多的颜色。
  • 如果只为该属性设置一个颜色值时,表示宽边设置为纯色,如果设置N个值,且边框宽度为N像素,那么可以在该边框上使用N中颜色,每个颜色显示1像素的宽度,如果边框宽度为10个像素,但是只声明了5种颜色,那么最后一种颜色用于剩下的宽度。
  • 可设置四个边框的颜色属性
    • border-top-color
    • border-right-color
    • border-bottom-color
    • border-left-color

阅读全文

node.js实现模拟登录,自动签到领流量。

开始本文之前,期待您了解页面与服务器的交互知识,会更容易理解。

需求

  • 某通有个活动,只要每天签到等各种操作就能累积积分,随着等级提升每月可以领到 20M - 300M的流量等。

  • 作为码农的你当然不愿意以正常的姿势去完成这些事情,所以你想要程序代替你完成这些事情。((^__^) 嘻嘻……)

阅读全文

为什么不可以提前 new 构造函数?

查看本文之前,期待您了解过 javascript变量声明提升(hoisting)的机制

先来看一段函数声明的代码

1
2
3
4
5
f();

function f() {
    alert('正常运行');
}

这段代码能够正常执行吗?

显然是可以的。
根据javascript的机制,这段代码将被解析为:
1
2
3
4
5
6
7
var f;

f = function() {
  alert("正常运行");
};

f();

如果是构造函数呢?

1
2
3
4
5
6
7
8
new F();

function F() {
    this.init();
}
F.prototype.init = function () {
    alert('正常运行');
}

凭直觉,这段代码能够正常执行吗?

阅读全文