星星閃光的CSS是一種可以讓網頁中的文本在鼠標經過時產生閃光效果的CSS技術。這種效果在吸引用戶注意力、增加頁面互動性方面都非常有用。
.star{ background-color: transparent; color: orange; cursor: pointer; display: inline-block; font-size:30px; position: relative; transition: all .3s ease-in-out; } .star::before { content: '★'; position: absolute; opacity: 0; transition: all .3s ease-in-out; top: 0; width: 100%; } .star:hover::before{ opacity: 1; top: -30px; }
在上面的代碼中,我們創建了一個類名為“star”的CSS樣式,在其中設置背景顏色為透明,顏色為橙色,顯示方式為塊內顯示,并且為其設置了一個絕對定位,方便我們后面的閃光效果。
接下來,在“star”類的偽元素“::before”中,我們設置了其內容為“★”,并且設置了其初始位置和透明度都為0,這意味著在瀏覽器中看不到它們。
在“::before”中,我們還為其設置了一個過渡效果,這樣在鼠標經過“star”類時,它就會平滑地從0不透明度到1不透明度,并且從初始位置下降到其緊挨著“star”類的頂部位置。
完成以上代碼后,你便可以在你的網頁中使用這個“star”類,讓你的文字閃閃發光了。
下一篇星星閃爍 css