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;