CSS 文字陰影加動畫是網頁設計中很常見的一個效果。簡單的文字陰影可以讓文本更加醒目突出,而加上動畫效果則可以讓網頁更具動感和視覺效果。
下面我們來看一下用 CSS 來實現文字陰影加動畫的具體實現:
/* 設置文字陰影 */ .shadow { text-shadow: 2px 2px 5px rgba(0,0,0,0.3); } /* 設置文字動畫 */ .animation { animation: shadow 1s ease-out infinite alternate; } @keyframes shadow { 0% { text-shadow: 2px 2px 5px rgba(0,0,0,0.3); } 100% { text-shadow: -2px -2px 5px rgba(0,0,0,0.3); } }
以上代碼中,我們通過設置text-shadow
屬性來實現文字陰影效果。這里的參數分別表示陰影水平、垂直偏移和模糊半徑以及陰影的透明度。通過調整這些參數,可以實現各種不同的陰影效果。
接著我們設置了一個名為animation
的類,該類引用了一個名為shadow
的動畫,該動畫會使陰影先向右下角擴散,然后再向左上角逐漸收縮。
這里的@keyframes
規則用于定義動畫的關鍵幀。我們在其中分別定義了 0% 和 100% 時的文字陰影效果,從而實現了動態的陰影效果。
通過以上的 CSS 代碼,我們就實現了一個簡單的文字陰影加動畫效果。可以在需要強調文本效果的地方使用該效果。例如:活動宣傳語、產品特色介紹等。