岁堤春晓

虽然从来没有想过试着去做一款像样的主题出来供自己使用，但着于Roam对WP的的中毒越来越深，所以不得不投入点精力来折腾下这款早已停更的Themes，同时也可以减轻点自己对那些主题高手们的羡慕和嫉妒之心，偶偶~~~ 确实蛋疼了。

这次主要是用上了CSS3的一些小特效，来丰富一点用户的体验，比如border-radius、box-shadow和text-shadow，而这些视觉享受目前只能在基于webkit的(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中才能得以体现，所以IE的用户请当看客吧（IE9貌似可以）。。

下面来看一看CSS3中的 变形(transformation)、转换(transition)和动画(animation)

CSS 变形(Transformation)

在实践之前基于中国人的特点，我并没有去W3C上阅读其大量的特性或方法，所以再经过GG后，就开始死学死用了。

transform属性它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素——只需要一行CSS代码。

一些有趣而有用的变形功能：

rotate：Rotate(旋转)允许你通过传递一个度数值来转动一个对象。

scale：Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。

translate：Translate就是基于X和Y 坐标重新定位元素

skew：顾名思义，skew就是要将对象倾斜，参数是度数

matrix：transform支持矩阵变换，就是基于X和Y 坐标重新定位元素

transform属性有很多用法，其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素，用法是 -webkit-transform: rotate(-90deg) 其中webkit是如Chrome的私有属性 必须加的（如果是Firefox就改成moz ，Oprea就改成o 而90deg为参数 指旋转多少度。

如果你有兴趣深入研究，可以看一下这里http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，这是SVG的一个文档，但是对于matrix变换的原理是通用的。

transition(转换)

一个涉及到CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(比如，深蓝色背景)到它的hover或者激活状态(比如，浅蓝色背景)。

转换可以和变形同时使用(以及引发诸如:hover 或:focus事件)以创建一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转都可以通过CSS转换实现。
转换的一些参数

transition-property：指定转换的CSS属性名称，比如，上面的例子中，将转换应用于background-color属性。

transition-duration：定义转换花费的时间（从旧属性换到新属性花费的时间）

transition-timing-function：可以理解为过度效果。指定转换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out

transition-delay：这个比较容易理解，就是转换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，转换的动作会从该时间点开始显示，之前的动作被截断。

Animation

动画是CSS 3最有用的地方。你可以将我们在上面讨论的所有的元素与动画属性比如animation-duration、animation-name 和animation-timing-function整合以创建像Flash动画一样的效果——纯CSS。

它的一些参数

animation的参数和translate有些像，所以如果你理解了translate的参数，这里就不难理解了。
animation-name：动画的名称。

animation-duration：定义动画播放一次需要的时间。默认为0；

animation-timing-function：定义动画播放的方式，参数设置类似transition-timing-function

animation-delay：定义动画开始的时间

animation-iteration-count：定义循环的次数，infinite即为无限次。默认是1。

-webkit-animation-direction：动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

这个梦幻的CSS动画代码和在线演示可以在webkit网站看到 当然IE仍然只能是看客~~~

上面的东西我是打算来勾引下想学习的朋友的 所以如果大家真的想好好研究下可以去看下此文http://www.zhangxinxu.com/wordpress/?p=498 看完后不敢说你会，但至少能做出东西来 嘿嘿~~

而自己的主题修改主要是对其超链接的透明替换叠加了渐变效果，这样至少从感官上更加和谐，所以想立刻体验的可以在页面多做停留————————————灰机 1、2、3、4、5、6、7——————————————————————————————————————————————-没了O(∩_∩)O~。