流光背景是一種常用于美化頁面的CSS效果之一。可以將網站的背景設置為流光狀,添加動感和美感。
background: -webkit-linear-gradient(left, #b2fefa, #0ed2f7, #b2fefa); background: -moz-linear-gradient(left, #b2fefa, #0ed2f7, #b2fefa); background: -o-linear-gradient(left, #b2fefa, #0ed2f7, #b2fefa); background: linear-gradient(to right, #b2fefa, #0ed2f7, #b2fefa); -webkit-background-clip: text; background-clip: text; color: transparent; animation: text-glow 10s ease-in-out infinite alternate; @keyframes text-glow { 0% { text-shadow: 0 0 10px #5AFFD8; } 100% { text-shadow: 0 0 20px #5AFFD8, 0 0 30px #5AFFD8, 0 0 40px #5AFFD8, 0 0 50px #5AFFD8; } }
以上是CSS代碼,首先使用線性漸變設置背景顏色,然后使用-webkit-background-clip和background-clip設置背景剪裁方式,將文字顏色設置為透明。接下來,使用動畫效果text-glow,通過改變text-shadow的值,在文本周圍形成光暈效果。最后通過調整動畫動畫時間和方式,來控制文本光暈的呈現效果。
上一篇css淺黑色