IFE2017 有趣的鼠標懸浮知識點
1.background屬性
background作為一個經常用的css屬性。還是挺重要的。通常以下幾個屬性
- background-color
background-color : 顏色
- background-image
background-image : url(背景圖片的地址)
- background-repeat
background-repeat : repeat | no-repeat | repeat-x/y
- background-position
background-position : top/bottom/left/right(組合使用) | x% y% | x y
// 當只設置了一個position值（top或其他），第二個值自動為center
// 當只設置了第一個值（x%|x px），第二個值自動為50%；
- background-attachment
// scroll（默認值）背景圖像會隨著頁面其他部分的滾動而移動
// fixed 當頁面其余部分滾動時，背景圖像不會移動！
以上是css3之前的background屬性
- background-clip
background-clip顧名思義。就是背景裁剪，規定背景的繪制區域
background-clip:border | padding | content | text;
// border : 背景從邊框開始繪制，但是邊框會cover背景
// padding ：背景從padding部分開始繪制，留下padding+content的背景
// content ： 只留存content的背景，。
// text ：只留下字體的背景。
- background-origin
background-origin : border | padding | content
// border : 背景從邊框開始鋪設
// padding：背景從padding開始繪制
// content ： 背景只鋪設內容部分
- background-size
background-size : length | % | cover | contain
// length | %
第一個值設置寬度，第二個值設置高度。
如果只設置一個值，則第二個值會被設置為 "auto"。
// cover
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
背景圖像的某些部分也許無法顯示在背景定位區域中。
// contain
把圖像圖像擴展至最大尺寸，以使其寬度和高度完全**適應**內容區域。但是會留空
2. transfrom
可用于內聯(inline)元素和塊級(block)元素。它允許我們旋轉、縮放和移動元素 ，他有幾個
屬性值參數：rotate（旋轉） | translate（位移？） | scale（伸縮） | skew（扭曲） | matrix。
transfrom : rotate（90°deg）； 正角度則順時針
transfrom : translate(X,Y);
transfrom : translateX/Y(100px | 100%);
transfrom : scale(x,y)
transfrom ：scaleX/Y
//如果只有一個值，則第二個參數同第一個一樣
transfrom : skew(x,y);
//x對應X軸，y對應Y軸。如果第二個數不提供，則默認為0
transfrom : skewX/Y();
改變基點的函數
transfrom ：oringin（x%,y%）
3. transition 過渡
transition-property :
//要使用過渡的屬性值
transition-duration :
//過渡持續的事件 1s 1000ms
transition-timng-function :
//變換速率函數：ease（逐漸變慢） | linear（勻速） | ease-in（加速） | ease-out （減速）| ease-in-out（先加速后減速）
transition-delay :
//過渡動畫延遲x s，x ms 開始
速記法
transition ： property duration timing-function delay
例子
.class {
...
...
transition : width 1s linear .5s
}
.class:hover{
width: 200px;
}
4.animation
1）關鍵幀
@keyframes 動畫名稱{
0%{
background-color: black;
}
50%{
background-color: red;
}
100%{
background-color: yellow;
}
}
transition的優點在于簡單易用，但是它有幾個很大的局限。
（1）transition需要事件觸發，所以沒法在網頁加載時自動發生。
（2）transition是一次性的，不能重復發生，除非一再觸發。
（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。
（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。
CSS Animation就是為了解決這些問題而提出的。
2）animation屬性
animation-name ： ‘str’
//自定義的動畫名，需要跟關鍵幀后面的動畫名稱相一致
animation-duration :
//一次動畫持續的時間，s | ms
animation-timing-function : ease | linear | ease-in | ease-out | ease-in-out
// 速率函數
animation-delay
// 過渡動畫延遲x s，x ms 開始
animation-iteration-count :
//動畫循環的次數
animation-direction：
//定義動畫執行的方向
// normal 正方向，一次動畫執行完畢后，又從頭開始繼續執行
// alternate 雙向。動畫播放在第偶數次向前播放，第奇數次向反方向播放。
animation-play-state：running | paused
//用來控制動畫的播放狀態
速記：
animation ： name duration timing-function delay iteration-count direction
eg：
animation ： ‘btnlight’ 2s linear .5s 10 alternate;
example
.class{
...
...
animation : "circleRotate" 4s linear .5s 10 alternate;
}
@keyframes "circleRotate"{
0%{
transform: rotate(0deg);
}
50%{
transform : rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果
其他知識點：
css屬性
filter：blur（？px）；
//用于圖片上，是圖片模糊.
解決方式
1.鼠標hover時，border從中間向兩邊延伸
2.流光字體的制作
流光字體的制作主要用到以下幾個屬性。
bakcground ：linear-gradient（）；
// 漸變背景
bakcgorund-clip ：text；
background-size ：
background-position：
animation：
3.背景模糊
filter: blur(5px);
JS小知識點
element.classList 一個元素的類屬性的實時DOMTokenList集合。
element.classList = elemet.className.split(' ');
element.classList本身是只讀的，但是可以通過add（）和remove（）方法修改它；
let elementClasses = element.classList();
element.Classes.add('someClass');
element.Classes.remove（'someClass');
element.Classes.contains('someClass');
// 主要是下面這個方法
element.Classes.toggle(1,2);
//toggle用于判斷element.classes是否存在某個類名。
//如果類存在，則刪除它并返回false，如果不存在，則添加它并返回true。
例子
btn.onclick = function(e){
e.classList.toggle('addColor');
}
//當按鈕被點擊時，如果按鈕存在了類‘addColor’，則從元素中刪除這個類名，如果不存在，則添加！
