演示
項目源代碼
這個任務主要是學習和使用CSS3的大部分屬性。使用的主要屬性如下:
其實壹開始，我在結構上犯了壹個錯誤。如果圖片作為背景圖片，在使用濾鏡模糊效果時，任何子元素都會產生模糊效果，所以後面的文字和邊框都是模糊的，所以要單獨使用圖片元素img來顯示背景圖片。
首先將背景圖像設置為線性-漸變，方向設置為從左到右，設置兩段同色節點，0%和100%同色，可以更好的實現文字流光的效果。
漸變的方向實際上是通過設置角度來控制的，角度是在水平線和漸變線之間生成的。默認方向是從下到上0度，從左到右90度。
我們發現整個背景都是漸變的，我們只需要文字的顏色變成漸變就可以了。我們開始使用-webkit-background-clip屬性將背景剪切成文本，同時設置文本的-webkit-text-fill-color或color屬性，使其文本顏色透明，這樣文本就可以顯示為漸變顏色。
這裏需要註意的是，文本的背景裁剪目前只有webkit內核瀏覽器支持，而且-webkit-text-fill-color和color都設置了，所以前者會覆蓋後者的屬性值。
此外，我們需要設置背景大小:200% 100%；因為漸變顏色設置為兩段同色節點，目的是重復兩段同色，實現動畫文本的流光效果。
目前做的是微分畫。首先，需要設置動畫規則關鍵幀，然後設置動畫循環時間、速度曲線和播放次數。因為背景長度為200%，所以動畫規則設置為100% { background-position:-100% 0；}，讓它沿著x軸變化，產生流動效果。
至此，流光效應已經實現。
背景圖像模糊處理是設置濾鏡:模糊(3px)；CSS3的濾鏡屬性主要用於處理圖片，比如黑白、對比度、亮度等。
這樣就實現了背景模糊的效果。
剛開始沒什麽想法，後來才知道這種效果可以通過偽元素::before和::after來實現。其思路是通過絕對定位前後虛擬元素來顯示上下左右邊框，將虛擬元素設置為元素上下邊框的left: 50%和top: 50%，通過改變其定位、寬度和高度來達到效果。
隱藏和顯示是通過設置opacity屬性實現的，初始狀態為0，鼠標滑動1。
CSS3的很多新特效都很酷，可以做到非常復雜的效果和動畫，值得好好看看。
當我想將鼠標移動到元素A上時，我得到了壹個手指效果，但它不起作用。通過調查發現偽元素覆蓋了元素A，根本無法接觸。那麽如何才能改變它們的級聯關系呢？我想到了z-index屬性，也因為這個問題重新學習了z-index屬性的用法。
對於已定位的元素(即位置屬性值為非靜態的元素)
我們現在分別在div(A)和div(B)中創建壹個小div(c)和壹個小div(d)。
讓我們嘗試將div(A)的Z索引設置為auto。
嘗試再次將div(a)設置為自動。
其實主要是找比較元素之間的基準棧上下文，這樣數字越大級別越高。
價值:
auto:元素不會創建新的本地堆棧上下文。當前堆棧上下文中新生成的元素與父元素具有相同的堆棧級別。
& lt整數& gt整數是當前堆棧上下文中生成的元素的堆棧級別。元素還創建壹個堆棧級別為0的本地堆棧上下文。這意味著子元素的z索引不會與除元素之外的其他元素的z索引進行比較。
壹般來說，設置auto時，元素的堆棧級別與父元素相同，遇到堆棧上下文後根據大小判斷級別。設置特定數字的元素也會遇到堆棧上下文，根據其大小來判斷層次結構。將子元素與外部元素進行比較時，它使用父元素的Z索引進行比較，並使用自己的Z索引與其兄弟元素進行比較。
CSS3的很多新特效都很酷，可以做到非常復雜的效果和動畫，值得好好看看。