CSS字體炫彩變色,能夠讓網頁更加生動且具有視覺沖擊力。下面就是一些例子。
/* 使用CSS實現字體炫彩變色 */ /* 漸變顏色 */ background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* 改變字母顏色 */ p { font-size: 48px; color: #e73c7e; text-shadow: 2px 2px #23d5ab, -2px -2px #ee7752; animation: shimmer 3s ease-in-out infinite; } /* 顏色呼吸 */ @keyframes breath { 0% { color: #e73c7e; } 50% { color: #23d5ab; } 100% { color: #ee7752; } } p { animation: breath 3s ease-in-out infinite; } /* 靜態漸變 */ background: -webkit-linear-gradient(to right, #f24767, #ff2e2e, #fb9815, #f8e32e); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
這些技巧可以應用在網頁設計中,讓網頁更加生動和有吸引力。