鼠標滑過文字是網頁設計中經常用到的效果,通過CSS可以添加一些特效,讓網頁看起來更加生動、有趣。下面介紹一些常見的鼠標滑過文字的特效。
/*1. 改變文字顏色*/ p:hover { color: red; } /*2. 底部下劃線*/ p:hover { text-decoration: underline; } /*3. 背景顏色變化*/ p:hover { background-color: yellow; } /*4. 改變文字大小*/ p:hover { font-size: 24px; } /*5. 文字水平移動(左右)*/ p:hover { transform: translateX(50px); } /*6. 文字垂直移動(上下)*/ p:hover { transform: translateY(-20px); } /*7. 文字傾斜*/ p:hover { transform: skewX(20deg); } /*8. 文字旋轉*/ p:hover { transform: rotate(30deg); } /*9. 模糊效果*/ p:hover { filter: blur(5px); } /*10. 置頂效果*/ p:hover { z-index: 999; }
以上是一些常見的鼠標滑過文字的特效,通過不同的CSS屬性可以實現不同的效果。在實際應用中,可以根據設計需求選擇合適的特效,以增強網頁的交互性、可視性、電商化等方面同樣適用。
上一篇css鼠標點擊變換圖片