CSS3(transform/transition/animation) 基础 总结

1、CSS3新增的样式（常用）

//颜色透明表示
rgba(0,0,0,.5) 

//圆角(定义角半径)
border-radius: 5px 10px 15px 20px;

//文字/盒子阴影
text-shadow: 2px 3px 3px #000;         //x方向,y方向,模糊半径,颜色(可定义多个阴影)
box-shadow: (inset) 2px 3px 3px #000;  //内阴影,x方向,y方向,模糊半径,颜色（可多个阴影）

//线性/径向渐变（没有纳入标准，需加浏览器内核前缀）
background-image: -linear/radial-gradient(left/left top/deg,#ccc,#000,red 50%,...);//起始方向，渐变的颜色（颜色占用的百分比）
background-image: -repeating-linear/radial-gradient(#ace 32%, #f96 36%);    //重复渐变，不定方向默认90deg

以上样式比较简单易用，不过细心用起来会发现可以实现很多很意料之外的效果，很强大的。以后遇到其他什么3D效果、渐变突出button，金属文字效果什么的，以上代码便可以实现。随便举个简单的 模拟按钮button 应用，e.g:

//HTML
<div class="box"><a href="">btn</a></div>

//CSS
.box a {
    display: block;
    width: 250px;
    color: #fff;
　　font-size: 70px;
    line-height: 1.5em;
    margin: 30px auto;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.3);
    //这部分是CSS3应用
    border-radius: 5px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
    box-shadow: 0 0 1px rgba(0,0,0,.4);
    background-image: -webkit-linear-gradient(90deg,#eaeaea,#c5c5c5); //webkit内核浏览器才能识别
}
.box a:hover {
    background-image: -webkit-linear-gradient(-90deg,#eaeaea,#c5c5c5);
}

 

2、CSS3的变形：transform (需前缀，请自行添加)

rotate(30deg)  //旋转
translate(x,y)/translateX(x)/translateY(y) //平移（x/y轴平移）
scale(x,y)/scaleX(x)/scaleY(y) //缩放
skew(x,y)/skewX(x)/skewY(y)    //扭曲

//重定义变形的基点，以上属性都有其默认基点
transform-origin: x y;

//定义多个属性
transform: rotate(30deg) scale(0.8,1.5) skew(30deg,-20deg);

 

3、CSS3的过渡变换：transition (需前缀，请自行添加)

//以下省略了前缀-transition
-property: name; //变换的属性名
-duration: time; //持续时间
-timing-function: 
    ease    //默认，逐步变慢
    linear  //匀速
    ease-in/out //加速/减速 
    ease-in-out //先加再减速
    cubic-bezier(x1,y1,x2,y2) //自定义时间贝塞尔曲线
-delay: time; //推迟时间

//定义多个变换
transition: all .5s ease-in-out 1s;

参考：http://www.css88.com/archives/5403 

 

4、CSS3动画制作：animation(keyframes) (需前缀，请自行添加)

首先，定义关键帧keyframes，学过flash动画的应该就很明白这个概念了

//百分比定义时间段
@keyframes name {
  0%   {属性状态}
  10%  {属性状态}
  70%  {属性状态}
  100% {属性状态}          
}
//从开始到结束的定义
@keyframes name {
  from {属性状态}
  to   {属性状态}
}    

然后，定义动画animation，大部分属性和transition的属性一样的，就没写的太详细了。

//以下省略了前缀-animation
-name: name;     //动画名(关键帧的名称)
-duration: time; //持续时间
-timing-function: linear;   //动画的时间曲线
-delay: time;    //推迟时间
-iteration-count: infinite; //为数字，infinite指无限次
-direction:   //动画方式
    normal    //默认值
    alternate //奇数次时反方向执行动画
-play-state: running/paused; //动画状态：播放/停止

//定义多个属性
animate: name 3s ease-in-out 2s infinite alternate;