CSS3-背景漸變

CSS3-背景漸變

 

CSS3 漸變（gradient）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 以前，你必須使用圖像來實現這些效果，現在通過使用 CSS3 的漸變（gradients）即可實現。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。

 

 

一、背景漸變

 

1、背景色的漸變線性漸變background: gradient（有兼容性的問題-webkit- -moz-）【老式寫法】

div{     
    width: 500px;     
    height:500px;     
    margin:10px;     
    float: left;     
    border: 1px solid #f66;     
    background: -webkit-gradient(linear,0 0,0 100%,from(#f00),to(#0000FF));     
    background: -moz-gradient(linear,0 0,0 100%,from(#f00),to(#0000FF));     
    background:-webkit-gradient(linear,left top,left bottom,from(#f00),to(#00f)); 
}

 

 

 

新寫法---線性漸變

 

div{    
    width: 500px;     
    height:500px;     
    margin:10px;     
    background: -webkit-linear-gradient(top,red,white,blue);     
    background: -moz-linear-gradient(top,red,white,blue); 
}

 

 

 

 

新寫法---徑向漸變

 

div{    
    width: 500px;     
    height:500px;     
    margin:10px;     
    background: -webkit-radial-gradient(50% 50%,black,white,blue);     
    background: -moz-radial-gradient(50% 50%,black,white,blue); 
}
 

 

 

 

新寫法---重復徑向漸變

 

div{    
    width:200px;     
    height:200px;     
    padding: 20px;                     
    background:-webkit-repeating-radial-gradient(circle contain,#f00,#ff0 10%,#f00 15%) 
}

 

 

CSS3-過渡transition

 

transition-property規定應用過渡的 CSS 屬性的名稱。 

 

transition-duration定義過渡效果花費的時間。默認是 0。 

 

transition-timing-function規定過渡效果的時間曲線。默認是 "ease"。     

    ease規定慢速開始，然后變快，然后慢速結束的過渡效果     

    linear規定以相同速度開始至結束的過渡效果     

    ease-in規定以慢速開始的過渡效果     

    ease-out規定以慢速結束的過渡效果     

    ease-in-out規定以慢速開始和結束的過渡效果

 

 

 

transition-delay規定過渡效果何時開始。默認是 0。 

 

transition ：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]簡寫屬性，用於在一個屬性中設置四個過渡屬性。

 

 

注釋：CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項

內容：

1.規定把效果添加到哪個 CSS 屬性上 

2.規定效果的時長 

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 屬性。 

Safari 需要前綴 -webkit-。 

Internet Explorer 9 以及更早的版本，不支持 transition 屬性。 

Chrome 25 以及更早的版本，需要前綴 -webkit-。

 

 

 

 

1、translate( ,)偏移方法

translate()根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。     

    Internet Explorer 10, Firefox, 和 Opera支持transform 屬性.     

    Chrome 和 Safari 要求前綴 -webkit- 版本. 

注意： Internet Explorer 9 要求前綴 -ms- 版本. 

translateX(x) 定義轉換，只是用 X 軸的值。 

translateY(y) 定義轉換，只是用 Y 軸的值。 

#div2{     
    transform:translate(30px,50px);     
    -ms-transform:translate(30px,50px);  IE 9      
    -webkit-transform:translate(30px,50px); */ 
}

 

 

 

2、rotate()旋轉方法

rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。

#div2{     
    transform:rotate(30deg);     
    -ms-transform:rotate(30deg);     
    -webkit-transform:rotate(30deg);  
}

 

 

 

3、scale( ,)縮放方法

scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數： div 元素的寬度是原始大小的兩倍，高度是原始大小的三倍。 

div {     
    margin: 150px;     
    width: 200px;     
    height: 100px;     
         
    -ms-transform: scale(2,3); /* IE 9 */     
    -webkit-transform: scale(2,3); /* Safari */     
    transform: scale(2,3); /* 標准語法 */ 
}

 

 

4、skew( ,)扭曲方法

skew()方法，該元素會根據橫向（X軸）和垂直（Y軸）線參數給定角度： 

#div2{     
    transform:skew(30deg,20deg);     
    -ms-transform:skew(30deg,20deg);      
    -webkit-transform:skew(30deg,20deg);  
}

 

 

transform-origin設置旋轉元素的基點位置： transform-origin: 50% 0%;