在 web 開發中,文本框是一個常見的輸入控件。通常,文本框中會出現一個閃爍的光標,用于指示用戶輸入位置。
input:focus{ border:2px solid blue; }
上面的代碼使用了:focus
偽類選擇器,當用戶點擊文本框后,邊框顏色會變成藍色,表示該文本框處于聚焦狀態。
為了讓光標閃爍起來,我們可以使用 CSS 的動畫效果:
input:focus{ border:2px solid blue; animation: blink 0.8s infinite; } @keyframes blink{ 0%{ opacity:1; } 50%{ opacity:0; } 100%{ opacity:1; } }
上面的代碼定義了一個名為blink
的動畫,通過逐漸改變透明度(opacity)的值來實現光標閃爍效果。這里的infinite
屬性用于表示動畫持續時間為無限長。
除了使用 CSS,還有一些 JavaScript 庫可以實現更加自定義化的光標效果。
上一篇文本框css代碼美化
下一篇文本顯示css樣式