★Font Face : 線上字體<3
☆
@font-face{
font-family: '字體名稱';
src: url('字體連結'); /* eot檔是什麼啊><" */
font-style: normal;
font-weight: normal;
}
h1{ /*或其他想要用此字體的地方*/
font-family: '字體名稱';
}
☆bold字體 EX:
@font-face{
font-family: '字體名稱'; (和normal字體同名)
src: url('字體連結'); /* eot檔是什麼啊><" */
font-style: normal;
font-weight: bold;
}
h1{
font-family: '字體名稱';
font-weight: bold;
}
★Transforms
☆translate
◆transform:translate(x-axis/*正值向右*/,y-axis/*正值向下*/);
◆x-axis、y-axis可用長度or百分比,y-axis不寫則視同0
◆分開寫法:translateX(x-axis); translate(y-axis);
☆rotate
◆transform:rolate(角度);
☆scale
◆transform:scale(倍率/*例如1.2*/);
◆不維持寬高比 transform:scale(<sx>,<sy>)
◆分開寫法: scaleX:(<sx>); scaleY:(<sy>);
☆skew
◆無合併寫法
◆transform: skewX(角度);
transform: skewY(角度);
★Transitions 從兩種states中慢慢轉換 (反正就是有動畫的效果><")
☆例如 background color EX:
.element{
background-color : black;
transition : background-color 0.2s ease-in-out
}
.element:hover{
background-color : blue;
}
☆transition: <property><duration><timing-function><delay>
☆timing-function:
◆ease
◆ease-in
◆ease-in-out
◆linear
◆cubic-bezier
◆step-start
◆step-end
◆steps()
☆每個項目可分開 EX: transition-property
☆所有property漸變,則<property>改成"all"
★Progressive Enhancement 不能在舊瀏覽器所成功解讀的新功能
☆
@font-face{
font-family: '字體名稱';
src: url('字體連結'); /* eot檔是什麼啊><" */
font-style: normal;
font-weight: normal;
}
h1{ /*或其他想要用此字體的地方*/
font-family: '字體名稱';
}
☆bold字體 EX:
@font-face{
font-family: '字體名稱'; (和normal字體同名)
src: url('字體連結'); /* eot檔是什麼啊><" */
font-style: normal;
font-weight: bold;
}
h1{
font-family: '字體名稱';
font-weight: bold;
}
★Transforms
☆translate
◆transform:translate(x-axis/*正值向右*/,y-axis/*正值向下*/);
◆x-axis、y-axis可用長度or百分比,y-axis不寫則視同0
◆分開寫法:translateX(x-axis); translate(y-axis);
☆rotate
◆transform:rolate(角度);
☆scale
◆transform:scale(倍率/*例如1.2*/);
◆不維持寬高比 transform:scale(<sx>,<sy>)
◆分開寫法: scaleX:(<sx>); scaleY:(<sy>);
☆skew
◆無合併寫法
◆transform: skewX(角度);
transform: skewY(角度);
★Transitions 從兩種states中慢慢轉換 (反正就是有動畫的效果><")
☆例如 background color EX:
.element{
background-color : black;
transition : background-color 0.2s ease-in-out
}
.element:hover{
background-color : blue;
}
☆transition: <property><duration><timing-function><delay>
☆timing-function:
◆ease
◆ease-in
◆ease-in-out
◆linear
◆cubic-bezier
◆step-start
◆step-end
◆steps()
☆每個項目可分開 EX: transition-property
☆所有property漸變,則<property>改成"all"
★Progressive Enhancement 不能在舊瀏覽器所成功解讀的新功能