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