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;
}