CSS3 漸變(IE9&-用濾鏡filter來兼容)
線性漸變:
linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom] 八個方向,to bottom是默認值,相當於180deg。
<color-stop> = <color> [ <length> | <percentage> ]?
例:background-image:linear-gradient(to left bottom, red 20%, orange 40%, yellow 85%,green 100%);
background-image:linear-gradient(-135deg,#ccc, #fcf);
徑向漸變:
radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
<position> = [ <length> | <percentage> | left | center| right ]? [ <length> | <percentage> | top | center②| bottom ]?
確定圓心的位置,默認值爲center。如果提供2個參數,第一個表示橫座標,第二個表示縱座標;如果只提供一個,第二值默認爲50%,即center.
<shape> = circle |ellipse 圓或橢圓
例:background-image:radial-gradient(circle at 50px top, red 30%, yellow,green, aliceblue);
重複線性漸變repeating-linear-gradient; 重複徑向漸變repeating-radial-gradient;
例:background-image:repeating-radial-gradient(circle,red, yellow 10px, green 80px);
CSS3 變形transform
1D變形函數:translateX(), translateY(), scaleX(),scaleY(), skewX(), skewY()…
2D變形函數:translate(),scale(),skew(), rotateZ()…
3D變形函數:rotateX(), rotateY(), rotate3d(),translateZ(), translate3d(), scaleZ(), scale3d(), matrix3d(), perspective()…
transform:none | <transform-function> [<transform-function>]*
transform-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]? 變形中心50% 50%
transform-style:flat | preserve-3d
flat: 所有子元素在2D平面呈現;preserve-3D:
perspective:none | <length> 景深,屬性要設置在父元素上纔有效;越小越靠近,越大趨近於none;
vs perspective函數用在變形元素上,可與其他transform函數一起使用;
perspective-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]? 透視中心50% 50%
backface-visibility:visible | hidden
例:transform: translateX(18px) scaleY(0.8)rotate(18deg) skew(-18deg) //X平移+Y縮放+旋轉+傾斜
CSS3 過渡 transition:
·實現屬性開始值與結束值之間的平滑過渡;
transition:<single-transition>[,<single-transition>]*
<single-transition> = [ none | <transition-property> ] || <transition-duration> || <transition-timing-function> || <transition-delay>
<' transition-property '>:過渡屬性
<' transition-duration '>:過渡持續時間
<' transition-timing-function '>:過渡動畫函數
<' transition-delay '>:過渡延遲時間
<transition-timing-function> = ease | linear | ease-in | ease-out |ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
linear:線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0,1.0)
ease:平滑過渡。等同於貝塞爾曲線(0.25, 0.1,0.25, 1.0)
ease-in:由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0,1.0)
ease-out:由快到慢。等同於貝塞爾曲線(0, 0, 0.58,1.0)
ease-in-out:由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58,1.0)
step-start:等同於 steps(1,start)
step-end:等同於 steps(1, end)
steps(<integer>[, [ start | end ] ]?):接受兩個參數的步進函數。第一個參數必須爲正整數,指定函數的步數。第二個參數取值可以是start或end,指定每一步的值發生變化的時間點。第二個參數是可選的,默認值爲end。
cubic-bezier(<number>, <number>, <number>,<number>):特定的貝塞爾曲線類型,4個數值需在[0, 1]區間內
例: .front{ background-color:#fcf; border:3px solid grey; transition:background-color 1.5s ease-in, border-radius 1.5s ease-out, border-color 1.3s linear 0.2s } front:hover{ background-color:#cec; border-radius:150px; border-color:transparent; } |
觸發過渡的方式:CSS僞類如:hover、:focus…;媒體查詢;JS切換類名…;
解決-webkit-留下痕跡的問題:硬件加速(添加-webkit-transform:translate(0));
CSS3 動畫animation
· transition只能指定屬性的起止狀態;animation通過指定“關鍵幀”來聲明動畫;
animation:<single-animation>[,<single-animation>]*
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
<' animation-name '>:動畫名稱,動畫名必須對應一個@keyframes規則;
<' animation-duration '>:動畫的持續時間;
<' animation-timing-function '>:動畫過渡類型,與transition-timing-function類似;
<' animation-delay '>:動畫延遲的時間
<' animation-iteration-count '>=infinite | <number>:對象動畫的循環次數。默認值爲1;
<' animation-direction '>=normal | reverse | alternate| alternate-reverse
alternate:先正常再反方向,交替運行;alternate-reverse:先反向再正向;
<' animation-fill-mode '>= none | forwards | backwards | both:對象動畫時間之外的狀態;
<' animation-play-state '>= running | paused:對象動畫的狀態。
animation實現的近似翻牌效果 <style> .wrap{ perspective:1000px; } .card{ width:250px; height:350px; background-image:url(frontface.jpg); background-size:100% 100%; } .card:hover{ animation: spin 5s linear infinite; } @keyframes spin{ 0%{ transform:rotateY(0); } 25%{ background-image: url(frontface.jpg); } 26%{ background-image: url(backface.jpg); } 75%{ background-image: url(backface.jpg); } 76%{ background-image: url(frontface.jpg); } 100%{ transform:rotateY(360deg); } } </style> <div class="wrap"> <div class="card"></div> </div> |
/* 部分屬性總結自 @飄零霧雨 《CSS參考手冊》,灰色底色代表屬性的默認值*/