在網頁設計中,一些效果的特殊處理是非常有必要的,包括字體動畫發(fā)光效果。這樣的效果可以為網頁增添生動活潑的氣息,吸引用戶的眼球。在CSS中設置字體動畫發(fā)光效果非常簡單,下面介紹具體操作方法:
/* 設置文本發(fā)光字體動畫 */ .text-glow { font-size: 50px; /*字體大小*/ font-weight: bold; /*字體加粗*/ text-transform: uppercase; /*大寫字母*/ color: #fff; /*字體顏色*/ position: relative; /*定位*/ } .text-glow:before { content: attr(data-text); position: absolute; /*定位*/ top: 0; left: 0; text-shadow: -1px -1px 0 rgba(255,255,255,0.1), 1px -1px 0 rgba(255,255,255,0.1), -1px 1px 0 rgba(255,255,255,0.1), 1px 1px 0 rgba(255,255,255,0.1); /*字體陰影*/ z-index: -1; /*壓縮為原始大小*/ opacity: 0; /*透明度*/ transition: opacity 0.75s ease-in-out; /*過渡效果*/ } .text-glow:hover:before { opacity: 1; /*鼠標懸停時*/ }
上述代碼中,首先定義一個名為.text-glow的class,然后定義該class的樣式屬性。在偽元素中使用text-shadow實現(xiàn)字體發(fā)光效果,使用opacity屬性和transition屬性實現(xiàn)過渡效果。當鼠標懸停在文本上時,利用:hover為偽元素設置一個opacity屬性的值,以實現(xiàn)閃爍的效果。這個方法不僅簡單,而且能夠達到比較好的視覺效果。
上一篇php date gi
下一篇php date gmt