在計算機科學領域,CSS是一種用于描述文檔樣式的語言。但是,CSS不僅局限于文本樣式,還可以用于手寫簽名。
.signature { width: 300px; height: 200px; border: 1px solid black; font-size: 30px; font-weight: bold; text-align: center; margin: 0 auto; } .signature::before { content: "Signed by: "; font-size: 20px; font-weight: normal; } .signature::after { content: " "; font-size: 20px; font-weight: normal; display: block; border-top: 1px solid black; } .signature:hover::after { content: " "; display: block; border-top: 1px solid black; animation: signing 3s forwards; } @keyframes signing { 0% { content: " "; } 50% { content: "Siginng... "; } 100% { content: "Done!"; } }
上面的CSS代碼定義了一個類名為“signature”的簽名板塊。其中,使用:before和:after偽元素來定義前綴和后綴內容。在鼠標懸浮在簽名區域時,使用@keyframes動畫來模仿手寫過程。
當然,這只是一個簡易的手寫簽名樣式。如果想要更加真實的手寫簽名效果,可以借助第三方庫如Signature Pad等。
下一篇手指的css樣式