Rudder

RSS
May 2
I’ve shared 72 memories with my friends on Path - see them now at path.com!

I’ve shared 72 memories with my friends on Path - see them now at path.com!

Apr 8

I 变形(transform)
transform:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix

II转换(transition)
css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
##transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值

III动画(animation)

Jun 6

TJ Holowaychuk: Stylus vs SASS vs LESS error reporting

tjholowaychuk:

I was curious what SASS did as far as error reporting goes, so I tried the following snippet with SASS, LESS as well as Stylus.

body { form input { background: foo[fail]; }
}

LESS

The output from LESS was terrible:

 Syntax Error on line 4

note: that for LESS I had to tweak the…

Jun 5

(Source: hamcycles)

Jun 5

gashetka:

2013 | Aston Martin CC100 | Source

Jun 4
gashetka:

1955 | Jaguar D-Type XKD 505 | Source

gashetka:

1955 | Jaguar D-Type XKD 505 | Source

Jun 4

css3制作动画的三个属性

一、transform

{1、旋转rotate 。2、移动translate。3、缩放scale。4、扭曲skew。5、矩阵matrix}

多个转换动作用逗号隔开(rotate,translate,scale,skew,matrix

transform在不同浏览器内核下的书写规则:

//Mozilla内核浏览器:-moz-transform: rotate | scale | skew | translate ;

 //Webkit内核浏览器:(Safari and Chrome) -webkit-transform: rotate | scale | skew | translate ;

 //Opera: -o-transform: rotate | scale | skew | translate ;

 //IE9:-ms-transform: rotate | scale | skew | translate ;

 //W3C标准:transform: rotate | scale | skew | translate ;

1、rotate:-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-o-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg)

设置旋转点:-moz-transform-origin: left top;

2.transform:scaleX(2):表示只在X轴伸缩,同理scaleY(1)表Y轴。

3.transform:skew(30deg,10deg):XY轴,transform:skewX(30deg)X轴,Y轴同理。

二、Transition.

1、ease:(逐渐变慢)默认值

2、linear:(匀速)

3、ease-in:(加速)

4、ease-out:(减速)

5、ease-in-out:(加速然后减速)

6、cubic-bezier:(该值允许你去自定义一个时间曲线)

书写格式:

-moz-transition: 属性  过渡时间  动作样式  延迟多久执行;

-webkit-transition: ……;

-o-transition:……;

transition:……;

image

三、Animation

语法规则:由 @keyframes 开头 + 动画的名称 + {括号中就是一些不同时间段样式规则,是由“0%”到”100%”之间的多个百分比构成的}

例子:

@keyframes 动画名称 {

      0% {

         css的属性名:css的属值;

      }

      百分比 {

         css的属性名:css的属值;

      }

.

.

.

      100% {

         css的属性名:css的属值;

      }

    }

在用animation调用(格式规则)

.class{

width: 1px;

height: 1px;

      margin: 1px;

.

-webkit-animation-name:”动画名称”;/*前面keyframes定义的动画名或者none为默认无动画效果*/

       .

       .

}

animation-name:动画名称

animation-duration:播放动画所持续的时间长 单位为s,默认值为0

animation-timing-function:动画的播放方式{ease:(逐渐变慢)linear:(匀速)ease-in:(加速)……}

animation-delay:元素动画开始时间间隔

animation-iteration-count:元素播放动画的循环次数(infinite为无限次数循环),默认值为1

animation-direction:指定元素动画播放的方向,为normal时,动画循向前播放;alternate时,动画播放在第偶数次向前播放,第奇数次向

反方向播放。

animation-play-state:控制元素动画的播放状态 running(默认)开始 和 paused暂停

image

Jun 4

clock.zip

Jun 4

http://www.v2ex.com/?r=rudder

weirdvintage:

Futuristic workstation, 1970s (via Ufunk)

weirdvintage:

Futuristic workstation, 1970s (via Ufunk)