CSS3實現的文字框陰影發光效果
本章節分享一段程式碼例項,此程式碼能夠當文字框獲取焦點的時候,能夠將邊框設定的具有陰影發光效果,希望需要的朋友可以進行一下參考,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .txt:focus{ transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linear .5s; -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; outline:none; border-color:rgba(93,149,242,.75); box-shadow:0 0 8px rgba(93,149,242,.105); -moz-box-shadow:0 0 8px rgba(93,149,242,.5); -webkit-box-shadow:0 0 8px rgba(93,149,242,3); } </style> </head> <body> <input type="text" class="txt" /> </body> </html>
上面的實現了我們的要求,具體實現過程就不介紹了,如有問題可以跟帖留言。
相關文章
- css3實現的文字陰影效果程式碼例項CSSS3
- css實現邊框陰影效果CSS
- css3實現的邊框陰影效果程式碼例項CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- WPF 實現陰影效果
- CSS3實現的div陰影效果程式碼例項CSSS3
- css實現帶有陰影的立體文字效果CSS
- CSS3文字陰影效果程式碼例項CSSS3
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- 陰影進階,實現更加的立體的陰影效果!
- Android開發中陰影效果的實現Android
- CSS 陰影進階,實現更加的立體的陰影效果!CSS
- CSS圖片邊框陰影效果CSS
- 網頁頂部陰影邊框效果網頁
- css圖片陰影、文字陰影CSS
- 實現給一個DIV加陰影效果!
- 使用純 CSS 實現滾動陰影效果CSS
- 點選文字框實現文字框內容選中效果
- 實現textarea文字框多行提示文字效果
- 小Tip:有三角的指示框陰影實現
- css實現動態陰影、蝕刻文字、漸變文字CSS
- CSS3實現多樣的邊框效果CSSS3
- CSS3 box-shadow 內外陰影效果CSSS3
- 短視訊系統,實現介面陰影效果
- view邊框陰影View
- 假陰影,低開銷的陰影實現方式
- CSS 文字陰影 text-shadow 懸停效果CSS
- css3實現0.5px邊框效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- 遊戲中的陰影實現遊戲
- css3實現的文字無法選中效果CSSS3
- CSS 邊框陰影立體邊框CSS
- 如何實現點選文字框刪除提示文字效果
- CSS:遮罩效果、陰影效果、毛玻璃效果CSS遮罩
- CSS實現文字框中的英文字母大寫效果CSS
- 在 iOS 裡 100% 還原 Sketch 實現的陰影效果iOS
- canvas設定陰影效果Canvas
- CSS3發光字型幾種效果CSSS3