CSS3的流光效果在網頁設計中經常被使用，可以使頁面更加生動、美觀。本文將介紹如何使用純CSS3實現流光效果。

首先在HTML文檔中準備一個需要應用流光效果的元素，例如：

<div class="shine">我是需要流光效果的元素</div>

接著，在CSS中給該元素設置如下樣式：

.shine {
position: relative;
}
.shine::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(243,152,0,0.5) 30%,rgba(231,56,39,0.7) 60%,rgba(243,152,0,0.5) 100%);
z-index: -1;
animation: shine 3s infinite;
}
@keyframes shine {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

代碼解釋：

• position: relative;：設置相對定位，為偽元素::before做絕對定位準備。
• ::before：添加一個偽元素，在目標元素之前（注意是雙冒號）。
• content: "";：偽元素必須設置該屬性，但內容可以為空。
• position: absolute;：偽元素絕對定位。
• top: 0;/left: 0;：（或top和right）設置偽元素的位置為目標元素的左上角。
• width: 100%;/height: 100%;： 偽元素寬高與目標元素相同。
• background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(243,152,0,0.5) 30%,rgba(231,56,39,0.7) 60%,rgba(243,152,0,0.5) 100%);：設置偽元素的背景，這里使用了線性漸變，rgba(255,255,255,0)代表透明的白色，后面的數字表示透明度。漸變到左側為完全透明，右側為半透明帶有顏色的光影。
• z-index: -1;：將偽元素放置到目標元素下層，防止遮擋。
• animation: shine 3s infinite;：將偽元素應用動畫效果，名為shine，持續時間為3秒，無限循環。
• transform: translateX(-100%);/transform: translateX(100%);：當動畫完成時距離左側或右側分別偏移目標元素的100%，形成從左到右或從右到左流動的效果。
• @keyframes：關鍵幀描述，定義一個變化序列。
• shine：動畫的名稱。
• 0%/100%：從0%到100%的變化過程。

完成后，我們就可以在瀏覽器中實現一個流光效果了。通過修改各種屬性值，可以更改效果的光影顏色、密度、流動速度等，實現更加絢麗多彩的效果。