本範例以CSS  text-shadow為基礎,搭配JS判斷滑鼠游標位置,及時反映文字陰影的相對位置。CSS3 text-shadow 用來設計文字陰影效果,通常我們會用在網頁標題上,增加視覺效果。text-shadow 支援所有主流的瀏覽器包含 FireFox、Chrome、Safari、Opera 等都有支援 CSS3 text-shadow 屬性,但在 IE9 及更早版本的 IE 瀏覽器並不支援 text-shadow 屬性。

shadow-css-3d

文字陰影CSS語法為:
text-shadow: 顏色 x軸位移 y軸位移 柔邊;

例如:
h1 {
text-shadow: #ff0000 2px 2px 1px;
}

原始碼預覽

See the Pen 3D CSS dynamic shadow by gklin (@gklin) on CodePen.0

訂閱RSS