CSS3变换、过渡、动画效果

为元素创建圆角

1.四个相同的圆角

-webkit-border-radius:10px;border-radius:10px;

2.一个圆角

-webkit-border-top-left-radius:10px;border-top-left-radius:10px;

3.椭圆型圆角

-webkit-border-radius:10px/50px；  /*前者是圆角在水平方向的半径，后者是圆角在垂直方向上的半径*/border-radius:10px/50px；

4.圆形

-webkit-border-radius:50%；

注意：有时元素背景会透过圆角，需要在border-radius后声明

background-clip:padding-box;

为文本添加阴影

/*四个值：水平偏移量，垂直偏移量，模糊半径，颜色*/text-shawdow：3px 3px 7px #e8e8e8;/*默认*/text-shawdow：none;

为元素添加阴影

-webkit-box-shawdow:x-offset,y-offset,blur-radius,inset(内嵌),spread(扩张或收缩阴影),color;

多重背景

background-color:#fff;//备用颜色background-image:url(01.png),url(02.jpg);//图片路径background-position:50%,100%;  //成对的x-offset,y-offset

渐变

使用前需要加前缀

• Chrome：-webkit
• Firefox:-moz
• Opera:-o

1.备用背景颜色

background:color;

2.线性渐变

background:linear-gradient(to right,red,yellow);//或者background:linear-gradient(270deg,red,yellow);//控制颜色停止位置background:linear-gradient(red 10%,yellow 70%，blue);

3.径向渐变

background:radial-gradient(yellow,red);//默认，渐变原点是中间background:radial-gradient(at top,yellow,red);//控制渐变原点位置background:radial-gradient(100px 50px,yellow,red);background:radial-gradient(70% 90%,yellow,red);/控制渐变尺寸background:radial-gradient(closest-side at 70px 60px,yellow, lime,red);//控制渐变中心的位置，并指出向外延伸的颜色

不透明度

opacity:.5//影响的是整个元素background-color:rgba(225,225,225,.6);//仅影响背景色

伪元素

//为Read More后添加双箭头.more:after{    content:"》";}

气泡的制作（矩形+小三角）待补充
？？？

sprite合并图像

//根据文件类型制作a前的图标.incon:before{    background-image:url();    content:" ";     display:block;    height:16px;    widht:16px;    width:16px;}//识别以.docx为后缀的文件，并插入相应的前部图片a[href=".docx"]:before{background-positon:-17px 0;}

2D、3D转换

移动、缩放、转动、拉伸
2D：
translate（）平移

transform:translate(200px,100px);-webkit-transform:translate(200px,100px);/*safati,chrome*/-ms-transform:translate(200px,100px);/*IE*/-o-transform:translate(200px,100px);/*opera*/-moz-transform:translate(200px,100px);/*firefox*/

rotate()旋转

transform:rotate(180deg);

scale()缩放

transform:scale(1,2);/*倍数：宽度，高度*/

skew()倾斜

transform：skew(50deg,50deg);

matrix()矩阵
3D:
rotateX()
rotateY()

transform:rotateX(100deg);

动作过渡

.div{    widtxh:100px;    height:100px;    transition:width 2s,height 2s,transform 2s;/*执行时间*/    transition-delay:2s;/*延时时间*/}.div:hover{    width:200px;    height:200px;    transform:rotate(90deg);}

Transition

从某一固定值平滑地过渡到另一属性值

transition-property:background-color;transition-duration:3s;transition-timing-function:linear;

Animation

遵循@keyframe规则
规定动画的时长
规定动画的名称
定义关键帧

div{    width:100px;    height:100px;    background-color:red;    positon:relative;    animation:anim 5s infinite alternate;/*连续*/}@keyframes anim{    /*开始帧*/    0%{background:red;left:0;top:0}    25%{background:blue;left:200px;top:0}    50%{background:red;left:200px;top:200px}    75%{background:blue;left:0;top:200px}    /*结束帧*/    100%{background:red;left:0;top:0}   }

实现动画的方法

linear开始和结束以相同的速度变化
ease-in由慢到快
ease-out由快到慢
ease
ease-in-out

多列

column-count列数
column-gap列距
column-rule线

.div{    column-count:3;    column-gap:30px;    column-rule:5px outset red;}

应用：瀑布流

.container{    column-width:25px;    column-gap:5px;}.container div{    width:250px;    margin:5px 0;}