網頁動畫中經常用到跑馬燈、流光特效，很多人自然想到用js實現，甚至使用canvas去完成，今天分享一個純CSS實現的流光效果。

思路：

①實現一條帶有靜态“流光”效果的邊，參考CSS漸變背景；

②實現靜态線條的“流光”動畫效果，參考純CSS實現背景顔色漸變動畫；

③将以上步驟得到的流光邊進行旋轉（參考CSS-rotate）、鏡像翻轉（參考CSS水平翻轉和垂直翻轉），即可實現與此邊同向和逆向的其他流光邊效果，同時設置旋轉和鏡像翻轉參考CSS同時設置多個變換效果

實現效果：

HTML：

<!-- 順時針的4條邊框 --> <!-- 邊框1：最初實現流光動畫效果的線條，頂部左->右流光 --> <div class="light-line right-top"> <div class="line-block gradient"></div> </div> <!-- 由邊框1順時針旋轉90度得到，右側上->下流光 --> <div class="light-line right-bottom"> <div class="line-block gradient"></div> </div> <!-- 由邊框1順時針旋轉180度得到，底部右->左流光 --> <div class="light-line left-bottom"> <div class="line-block gradient"></div> </div> <!-- 由邊框1順時針旋轉270度得到，左側下->上流光 --> <div class="light-line left-top"> <div class="line-block gradient"></div> </div> <!-- 逆時針的4條邊框 --> <!-- 由邊框1水平鏡像翻轉得到，頂部右->左流光 --> <div class="light-line-r right-top-r"> <div class="line-block gradient"></div> </div> <!-- 由邊框1順時針旋轉90度、水平鏡像翻轉得到，右側下->上流光 --> <div class="light-line-r right-bottom-r"> <div class="line-block gradient"></div> </div> <!-- 由邊框1順時針旋轉180度、水平鏡像翻轉得到，底部左->右流光 --> <div class="light-line-r left-bottom-r"> <div class="line-block gradient"></div> </div> <!-- 由邊框1順時針旋轉90度、水平鏡像翻轉得到，右側下->上流光 --> <div class="light-line-r left-top-r"> <div class="line-block gradient"></div> </div>

### CSS部分： body { background: #2A2A2A; } .light-line { position: absolute; top: 20px; left: 20px; width: 320px; height: 320px; } .light-line-r { position: absolute; top: 20px; left: 360px; width: 320px; height: 320px; } /* 漸變流光效果線條，要将橫向寬度設置為超過100%的值，否則無動畫效果 */ .line-block { position: relative; width: 100%; height: 6px; background: linear-gradient( -90deg, #FFEFCA 1%, #FFBB1F 4%, transparent 12%, transparent 16%, #FFEFCA 16%, #FFBB1F 19%, transparent 27%, transparent 33%, #FFEFCA 33%, #FFBB1F 36%, transparent 44%, transparent 50%, #FFEFCA 50%, #FFBB1F 53%, transparent 61%, transparent 66%, #FFEFCA 66%, #FFBB1F 69%, transparent 77%, transparent 84%, #FFEFCA 84%, #FFBB1F 87%, transparent 95%, transparent 100% ); background-size: 200% 100%; } /* 指定使用Gradient動畫，5s完成一次動畫，勻速，無限循環 */ .gradient { animation: Gradient 5s linear infinite; -webkit-animation: Gradient 5s linear infinite; -moz-animation: Gradient 5s linear infinite; } /* 定義Gradient動畫效果：初始時顯示最右端，結束時顯示最左端（向右滾動） */ @keyframes Gradient { 0% { background-position: 100% 100%; } 100% { background-position: 0% 100%; } } /* 兼容寫法.. */ @-webkit-keyframes Gradient { 0% { background-position: 100% 100%; } 100% { background-position: 0% 100%; } } /* 兼容寫法.. */ @-moz-keyframes Gradient { 0% { background-position: 100% 100%; } 100% { background-position: 0% 100%; } } .right-top { transform: rotate(0deg); } .right-bottom { transform: rotate(90deg); } .left-bottom { transform: rotate(180deg); } .left-top { transform: rotate(270deg); } .right-top-r { transform: rotate(0deg) rotateY(180deg); } .right-bottom-r { transform: rotate(90deg) rotateY(180deg); } .left-bottom-r { transform: rotate(180deg) rotateY(180deg); } .left-top-r { transform: rotate(270deg) rotateY(180deg); }

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!