果圖截圖:
案例代碼示下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>發光輸入框</title> <style type="text/css"> input{width: 280px;height: 30px;} textarea{width: 280px;height: 80px;} input,textarea{ -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0 3px 3px; margin: 5px 1px 3px 0; border: #ddd 1px solid; } input:focus,textarea:focus{ box-shadow: 0 0 5px rgba(216,76,41,1); padding: 3px 0 3px 3px; margin: 5px 1px 3px 0; border: rgba(216,76,41,1) 1px solid; } </style> </head> <body> <input type="text" name="" id="" value="" /> <textarea></textarea> </body> </html>
注意:
以上就是關于 “ css實現發光的input輸入框 ” 的全部內容。
天我學到一款非常炫酷的HTML5/CSS3陰影文字特效,一共有9組不同的樣式,這9組文字中,除了有不同的字體外,每一組的文字陰影和文字放光顏色都不同,看起來都十分漂亮,遺憾的是,中文并沒有那么漂亮的字體了。在頁面的字體設計中,可以拿出來玩玩,絕對很炫的。
效果圖,有點偏差
大家可以在下面分享自己學習的經驗,謝謝!!!
網頁設計工作中,我們可以給很多元素添加發光的動畫效果,舉幾個例子,“輸入框”、“文字”、“進度條”等。給這些元素加上的發光特效會讓整個網頁變得更加炫酷。今天陜西優就業小編就為大家搜集整理了8款炫酷的HTML發光動畫,這些都可以用作Web前端開發工作中,可以為你節省很多開發時間。
1.HTML5 Canvas五彩繽紛的3D發光水晶球動畫
這是一款基于HTML5 Canvas的超絢麗發光水晶球動畫,就像是酒吧里的那種水晶球射燈一樣,不停地隨機變換射出光線的顏色,給人一種非常動感的視覺效果。整個水晶球是在Canvas畫布上繪制而成,利用CSS3的相關特性使其能夠出現五彩繽紛的發光動畫,而且可以通過鼠標滾輪來放大縮小這個水晶球,不得不說HTML5真的是非常強大。
2.jQuery/CSS3實現漂亮字體發光特效
今天我們要來分享一款很酷的jQuery/CSS3文字發光特效,首先是加載了谷歌的公共字體庫,因此字體非常特別和漂亮,另外利用了jQuery和CSS3的相關特性,當鼠標滑過文字時,文字將會出現發光的動畫特效,非常漂亮。
3.超絢麗CSS3多色彩發光立方體旋轉動畫
之前我們分享過幾個不錯的CSS3立方體動畫,比如這款HTML5 3D立方體旋轉動畫和HTML5 3D立方體圖片切換動畫。今天要分享的也是一款基于CSS3的3D立方體旋轉動畫,不同的是,這款立方體的每一個面都有不同的色彩,并且會帶有絢麗的發光特效。
4.純CSS3實現發光開關切換按鈕
前段時間我們向大家分享過一款牛奶般剔透的CSS3 3D開關按鈕,效果相當贊。今天我們要來分享一款類似的純CSS3發光開關切換按鈕,它的外觀就像一個電燈的開關,可以左右切換。另外開關上的文字還有發光的特效,整體看上去很有立體感。
5.純CSS3和SVG鼠標滑過燈泡發光特效
這次要分享一款利用純CSS3和SVG實現的燈泡發光效果,我們只需要將鼠標滑過燈泡,整個燈泡就會出現發光發亮的動畫特效,效果相當逼真。CSS3的運用,讓燈泡外圍有一層淡淡的光暈。并且在燈光點亮和熄滅的時候有淡入淡出的效果。
6.HTML5 Canvas發光Loading動畫
之前我們分享過很多基于CSS3的Loading動畫效果,相信大家都很喜歡。今天我們要來分享一款基于HTML5 Canvas的發光Loading加載動畫特效。Loading旋轉圖標是在canvas畫布上繪制的,整個loading動畫是發光3D的視覺效果,HTML5非常強大。
7.CSS3發光Loading加載動畫
今天我們要分享一款與眾不同的CSS3 Loading動畫效果,它是由幾個不同的動畫效果組合而成的,像文字打印效果、發光效果、飛入飛出效果,這幾種效果都非常酷。另外我們可以再回顧一下其他的CSS3 Loading效果:HTML5 Canvas實現超酷Loading動畫、很有個性的CSS3彈跳Loading動畫。
8.純CSS3實現發光動畫按鈕特效
這是一款基于純CSS3的發光按鈕,按鈕發光的顏色是隨機的,這樣一排按鈕就顯得五彩繽紛,非常絢麗。之前我們也介紹過不少樣式很獨特的CSS3按鈕,比如純CSS3 3D開關按鈕、純CSS3實現動感彈性按鈕等,都非常不錯,也有HTML5動畫按鈕,大家可以自己看看。
陜西優就業:http://www.ujiuye.com/shaanxi/
IT學習交流:468910291
*請認真填寫需求信息,我們會在24小時內與您取得聯系。