## 白光劃過效果 這一節來介紹白光劃過效果！ 當鼠標移動到圖片上時，有一道貌似白光的東東從圖片上劃過去。  **1、創建模板** 我們要放置一張圖片，用一個div包裹起來： ``` <div class="highlight-box"> <img src="images/example.jpg" alt="" /> </div> ``` **2、設置CSS樣式** 定義初始樣式（高寬可調整）： ``` .highlight-box { width: 300px; height: 120px; overflow: hidden; position: relative; } .highlight-box img { width: 100%; height: 100%; } ``` 注意：包裹圖片的div（也就是類名為`.higlight-box`的div）一定要加上定位屬性position，不加的結果是神馬呢？你試試吧。 靜態圖片已經有了，接著讓我們來制作白光，我們不需多余的元素，只需使用`:before`選擇器： ``` .highlight-box:before { display: block; /*注意這里top和left，讓白光移動到圖片左上角， 后續的劃過動畫也是依靠這兩個屬性*/ top: -200%; left: -100%; /*定義白光的寬高*/ width: 50%; height: 300%; /*旋轉角度，你也可以調整*/ -webkit-transform: rotate(45deg); transform: rotate(45deg); /*使用漸變來實現白光*/ background: -webkit-linear-gradient(left, rgba(255, 255, 255, .05) 20%, rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .05) 100%); background: linear-gradient(left, rgba(255, 255, 255, .05) 20%, rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .05) 100%); content: ''; z-index: 2; position: absolute; } ``` 我們使用漸變（linear-gradient）來實現白光效果，同時為了斜向劃過，使用`transform: rotate(45deg)`將其旋轉45度。 上面的height、width、top和left，你也可以使用具體的像素值，不過建議采用百分比，這樣可以重復使用，而不需手動改變太多值。 圖片有了，白光有了，接下來就是讓白光動起來： ``` .highlight-box:hover:before { //這里省略了私有前綴代碼 animation: crossed .5s linear; } @keyframes crossed { 0% { top: -200%; left: -100%; } 100% { top: -50px; left: 100%; } } ``` 我們需要改變的只是top和left的值，也就是讓白光從左上角向右下角移動。 到這里，白光劃過效果已經實現了。 源碼路徑：` WebDemo/CSS/highlight` 源碼下載地址在目錄的最后。