使用偽類:after加閃爍的游標以及下劃線
阿新 • • 發佈：2019-02-01
需求
實習過程都是開發關於銀行理財產品、手機銀行方向的業務，所以金額輸入框是常見的開發需求。
一般我們不會使用HTML自帶的input輸入框，而是使用div模擬金額輸入，要使得div更像金額輸入框，就需要有一個閃爍的游標。(動畫做的不好望諒解哈~)
利用加閃爍游標
這裡需要一點css的動畫功底，涉及到animation、transform
<!DOCTYPE html> <html> <head> <title>:after加閃爍游標</title> <meta charset="utf-8"> <style type="text/css"> #input{ position: relative; } @keyframes blink { 0%, 100% { background-color: #000; } 50% { background-color: transparent; } } #input:after { position: absolute; content: ''; display: inline-block; width: 2px; height: 18px; top: 50%; transform: translateY(-50%); animation: blink 1.2s infinite steps(1, start); } </style> </head> <body> <div id="input">test</div> </body> </html>
其實直接利用一個新的div標籤，設定其border，以及div的動畫也可以達到這個效果，不過一般規範點的程式碼都會用偽類來實現，都很少用一個沒有意義的多餘的div標籤。類似的需求還有，給一個框設定下劃線，也可以用偽類來實現。
利用偽類加下劃線
程式碼如下：
<!DOCTYPE html> <html> <head> <title>:after加下劃線</title> <meta charset="utf-8"> <style type="text/css"> #input{ position: relative; } @keyframes blink { 0%, 100% { background-color: #000; } 50% { background-color: transparent; } } #input:after { position: absolute; content: ''; width: 30px; height: 1px; bottom: 0; background: #000; left: 0; } </style> </head> <body> <div id="input">test</div> </body> </html>
效果
