一、動畫(animation)(IE10+)(CSS3)
1.1 定義動畫
1.2 引用動畫
1.3 多個動畫
1.4 更多屬性
二、過渡(transition)(IE10+)(CSS3)
2.1 定義首尾
2.2 應用過渡
2.3 多個過渡
2.4 更多屬性
三、轉換(transform)(IE10+,-ms-,-webkit-,-moz-,-o-)(CSS3)
3.1 2D轉換(-ms- for IE9)
3.2 3D轉換(not opera)
四、圓角、陰影和透明的實踐(CSS3)
4.1 圓角(border-radius)(IE9+)
4.2 陰影(shadow)(box-shadow IE9+ text-shadow IE10+)
4.3 透明度(opacity)
五、可縮寫屬性
5.1 背景(background)
5.2 字體(font)
5.3 邊框(border)(border-image IE11+)
5.4 填充和邊距(padding/margin)
六、濾鏡(filter)(notIE,-webkit-)
七、補充
7.1 自定義鼠標指針(cursor)
7.2 Canvas
7.3 SVG
7.4 WebGL
一、動畫(animation)(IE10+,-webkit-,-moz,-o-)(CSS3)
動畫抵達的過程是連續的,還原的過程是突發的。放完了就還原,就是這麼任性。
1.1 定義動畫
定義動畫可以用from-to的兩個定點形式,也可用百分比(0%、50%、100%)的多個定點形式。
/* 定義動畫 */
@keyframes toRight {
from {
left: 0px;
top: 0px;
background-color: red;
}
to {
left: 130px;
top: 0px;
background-color: blue;
}
}
1.2 引用動畫
我們先定義一個div塊,class爲animation。然後對這個div塊引用動畫效果。
/* HTML部分 */
<div class="animation"></div>
/* 定義div塊的默認樣式 */
.animation {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
/* 引用動畫 當鼠標懸於div塊上方時觸發動畫效果 */
.animation:hover {
animation: toRight 5s;
}
1.3 多個動畫
設置多個幀(@keyframes),使用不同的名字。在引用動畫的時候不同的幀用逗號隔開。
animation: toRight 5s,toTop 5s;
1.4 更多屬性
下面是一個完整的屬性應用和屬性說明。
animation:walk 2s ease 1s 2 normal running forwards;
animation-name:keyframename/none;
animation-duration:time;
animation-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic-
bezier(n,n,n,n);
animation-delay:time;
animation-iteration-count:n/infinite;
animation-direction:normal/alternate;
animation-play-state:paused/running;
animation-fill-mode:none/forwards/backwards/both;
二、過渡(transition)(IE10+,-webkit-,-moz,-o-)(CSS3)
過渡一直是連續的,無論是抵達的過程,還是還原的過程。
2.1 定義首尾
/* HTML */
<div class="transition"></div>
/* 定義首 默認樣式 */
.transition {
width: 100px;
height: 100px;
background-color: red;
}
/* 定義尾 目標樣式 */
.transition:hover {
width: 200px;
}
2.2 應用過渡
.transition {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s; /* 只需添加這一條 */
}
2.3 多個過渡
應用多個過渡的時候用逗號隔開,或者直接設置應用過渡效果的屬性爲all。
transition: width 5s,height 5s;
或
transition: all s;
2.4 更多屬性
transition:width 2s ease 1s;
transition-property:none/all/property;
transition-duration:time;
transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic-
bezier(n,n,n,n);
transition-delay:time;
三、轉換(transform)(IE10+,-ms-,-webkit-,-moz-,-o-)(CSS3)
3.1 2D轉換(-ms- for IE9)
以下沒有演示矩陣效果,更多請見張鑫旭。下圖的效果依次是縮放、旋轉、斜拉和移動,參數和下方的參數保持一致,展示的過程是用animation做的。
縮放 transform:scale(2,2); // 兩個參數分別是寬和高縮放的比例
旋轉 transform:rotate(180deg);
斜拉 transform:skew(30deg,30deg);
移動 transform:translate(50px,-50px);
矩陣 transform:matrix(n,n,n,n,n,n); // 3*3矩陣 6個參數
3.2 3D轉換(not opera)
縮放:transform:scale(x,y)/scaleX(x)/scaleY(y)/scaleZ(z)/scale3d(x,y,z)
旋轉:transform:rotate(angle)/rotateX(angle)/rotateY(angle)/rotateZ(angle)/rotate3d(x,y,zangle)
斜拉:transform:skewX(angle)/skewY(angle)/skew(x-angle,y-angle)
移動:transform:translate(x,y)/translateX(x)/translateY(y)/translate3d(x,y,z)
透視:perspective(100) 默認單位是px,表示觀察者離物體的距離(-webkit-)
矩陣:transform:matrix3d(); 4*4矩陣 16個參數
其他:transform:none;
屬性
transform-origin:x-axis/y-axis/z-axis;
transform-style:flat/preserve-3d;(not IE)
perspective:number/none;
perspective-origin:x-axis/y-axis;
backface-visibility:visibility/hidden;
四、圓角、陰影和透明的實踐(CSS3)
4.1 圓角(border-radius)(IE9+)
下面是用過渡和圓角製作的一個按鈕。
/* HTML */
<a href="#" class="border-radius">HELLO</a>
/* CSS */
.border-radius {
border: 1px solid red;
border-radius: 10px 0 10px 0; // 設置圓角(四個值分別爲top-left、top-right、bottom-right和bottom-left)
width: 60px;
padding: 10px;
text-align: center;
transition: all .3s ease-in-out; // 設置過渡效果
text-decoration: none; // 去除鏈接下劃線
}
.border-radius:hover {
background-color: red;
color: white;
}
4.2 陰影(shadow)(box-shadow IE9+ text-shadow IE10+)
給按鈕加上盒陰影和文本陰影。
/* HTML */
<a href="#" class="border-radius">HELLO</a>
/* CSS */
.border-radius {
border: 1px solid red;
border-radius: 10px 0 10px 0;
width: 60px;
padding: 10px;
text-align: center;
transition: all .3s ease-in-out;
text-decoration: none;
}
.border-radius:hover {
background-color: red;
color: white;
box-shadow: -10px -10px 5px gray; // 盒子陰影(四個值分別是x軸、y軸、模糊距離和顏色)
text-shadow: -5px -5px 3px black; // 文本陰影
}
4.3 透明度(opacity)
再加上透明度。默認透明度爲0.5,懸浮在按鈕上後變爲1.0.
/* HTML */
<a href="#" class="border-radius">HELLO</a>
/* CSS */
.border-radius {
border: 1px solid red;
border-radius: 10px 0 10px 0;
width: 60px;
padding: 10px;
text-align: center;
transition: all .3s ease-in-out;
text-decoration: none;
opacity: .5; // 設置默認透明度爲0.5
}
.border-radius:hover {
background-color: red;
color: white;
box-shadow: -10px -10px 5px gray;
text-shadow: -5px -5px 3px black;
opacity: 1; // 設置按鈕懸浮之後的透明度爲1
}
/* 除了opacity,rgba同樣具有透明度屬性 */
五、可縮寫屬性
5.1 背景(background)
製作精靈圖(sprite)可以用background-color:url() -20px -20px;,然後將元素的width和height設置成小圖的大小。
background:red url(laughcry.gif) repeat top left;
background-color:color/transparent;
background-image:url()/none/inherit;
background-repeat:repeat/repeat-x/repeat-y/no-repeat/inherit;
background-position:left top/center top/right top...;
background-attachment:scroll/fixed/inherit;
background-size:length/percentage/cover/contain; // cover爲覆蓋最小定位區域,contain爲最大
background-clip:border-box/padding-box/content-box; // 指定定位區域
background-origin:border-box/padding-box/content-box; // 指定繪畫區域
CSS3
多背景:(-image:url(bg.jpg),url(dog.jpg))定位源(-origin:content-box/padding-box/border-box)顯示區域(-clip:content-box;)和尺寸(-size(80px 60px))
漸變(gradient)(IE10+,-webkit-,-o-,-moz-)(CSS3)
線性漸變(linear-gradient)
* background:linear-gradient(red,blue,green)
* 默認爲從上到下漸變,to right(前綴寫法中皆爲left)可以設置從左到右漸變,to bottom right則對角線漸變(前綴寫法中webkit爲left top),180deg則可以設置按照角度漸變;
* background:linear-gradient(to right,red 10%,blue 50%,green 70%)
* background:linear-gradient(rgba(220,220,220,0),rgba(220,220,220,1))
徑向漸變(radial-gradient)
* background:radial-gradient(red,blue,green)
* 顏色值前面可以設置形狀elipse/circle(橢圓/圓)默認爲elipse
* background:radial-gradient(60% 55%,closest-side,red,blue,green)
* 以上的參數還有farthest-side,closest-corner,farthest-corner,
5.2 字體(font)
文字溢出時可以使用word-break:break-all;進行字母級截斷,也可以使用word-wrap:break-word;進行單詞級的截斷。
font:italic bold 1.2em/1.2 Arial,sans-serif;
font-style:normal/italic/oblique/inherit;
font-weight:normal/bold/bolder/lighter/100...900 400爲normal 700爲bold/inherit;
font-size:xx-small/x-small/small/medium/large/x-large/xx-large/smaller/larger/length/%/inherit;
line-height:normal/number/length/%/inherit;
font-family:family-name/generic-family;
CSS3
@font-face用來設置自定義字體。留坑,以後再來好好總結一下。以下代碼直接粘貼自[菜鳥教程](http://www.runoob.com/try/try.php?filename=trycss3_font-face_rule)。
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{
font-family:myFirstFont;
}
5.3 邊框(border)(border-image IE11+)
outline和border類似,但是不佔用佈局空間。
border:1px solid red; // 值分別爲border-width、border-style和border-color
border-style:none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset/inherit;
CSS3
border-image:url() 30 30 stretch;(round爲邊框重複,stretch爲邊框拉伸)
5.4 填充和邊距(padding/margin)
垂直方向的margin會合並,水平方向的不會。實際顯示的margin是兩者中較大的那個。
padding:1px 2px 1px 2px;(top/right/bottom/left)
六、濾鏡(filter)(notIE,-webkit-)
以下作爲參考手冊。
* 透明 filter:opacity(50%);
* 陰影 filter:drop-shadow(10px 10px 5px red);
* 模糊 filter:blur(5px);
* 對比度 filter:contrast(200%);
* 飽和度 filter:saturate(800%);
* 灰度 filter:grayscale(100%);
* 深褐色 filter:sepia(100%);
* 亮度 filter:brightness(200%);
* 色相旋轉 filter:hue-rotate(90deg);
* 反轉輸入 filter:invert(100%);
* 多值空格隔開 filter:filter:opacity(50%) blur(5px);
七、補充
7.1 自定義鼠標指針(cursor)
cursor:pointer/help/wait/text/move/crosshair;
7.2 Canvas
待到總結js的時候,再一併總結。
7.3 SVG
SVG全稱爲可縮放矢量圖像(Scalable Vector Graphics),參考教程有W3School和W3CPlus。成熟的庫有D3.js,常用來進行數據可視化。以後學習,留坑。
7.4 WebGL
WebGL全稱爲網頁圖像庫(Web Graphics Library)。成熟的庫有three.js,常用來基於web的3D製作。以後學習,留坑。