css3经典动画与旋转样式

**

demo演示效果：http://codepen.io/tianzi77/pen/LVPzqB

**
代码如下：主要用到css3的animation和transform transition keyframe 以及text-shadow属性。





Examples

surprised:target span{font-size:50%;line-height:0;}

surprised:target:hover .re{-webkit-transition-duration:0.5s;border-bottom-color:#FFE033;}

surprised:target:hover .rc{-webkit-transition-duration:1s;border-bottom-color:#65A8EC;}

surprised:target:hover .rg{-webkit-transition-duration:1.5s;border-bottom-color:#FFE033;}

surprised:target:hover .rd{-webkit-transition-duration:0.5s;border-bottom-color:#3DAD4A;}

surprised:target:hover .rz{-webkit-transition-duration:1s;border-bottom-color:#D20000;}

@-webkit-keyframes liuzhe-01 {
from{color:rgba(255,255,255,0.6);text-shadow:0 0 8px rgba(239,233,191,0.6);}
to{color:rgba(255,255,255,0);text-shadow:0 0 8px rgba(239,233,191,0);}
}
@-webkit-keyframes liuzhe-02 {
from{color:rgba(255,255,255,0);text-shadow:0 0 8px rgba(239,233,191,0);}
to{color:rgba(255,255,255,0.6);text-shadow:0 0 8px rgba(239,233,191,0.6);}
}

xiaozhe