css實(shí)現(xiàn)發(fā)光的input輸入框

果圖截圖：

案例代碼示下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>發(fā)光輸入框</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的 transition 動(dòng)畫(huà)屬性。
transition的瀏覽器兼容性，添加瀏覽器廠商前綴。

以上就是關(guān)于 “ css實(shí)現(xiàn)發(fā)光的input輸入框 ” 的全部?jī)?nèi)容。

天我學(xué)到一款非常炫酷的HTML5/CSS3陰影文字特效，一共有9組不同的樣式，這9組文字中，除了有不同的字體外，每一組的文字陰影和文字放光顏色都不同，看起來(lái)都十分漂亮，遺憾的是，中文并沒(méi)有那么漂亮的字體了。在頁(yè)面的字體設(shè)計(jì)中，可以拿出來(lái)玩玩，絕對(duì)很炫的。

效果圖，有點(diǎn)偏差

CSS樣式：

大家可以在下面分享自己學(xué)習(xí)的經(jīng)驗(yàn)，謝謝！！！

網(wǎng)頁(yè)設(shè)計(jì)工作中，我們可以給很多元素添加發(fā)光的動(dòng)畫(huà)效果，舉幾個(gè)例子，“輸入框”、“文字”、“進(jìn)度條”等。給這些元素加上的發(fā)光特效會(huì)讓整個(gè)網(wǎng)頁(yè)變得更加炫酷。今天陜西優(yōu)就業(yè)小編就為大家搜集整理了8款炫酷的HTML發(fā)光動(dòng)畫(huà)，這些都可以用作Web前端開(kāi)發(fā)工作中，可以為你節(jié)省很多開(kāi)發(fā)時(shí)間。

1.HTML5 Canvas五彩繽紛的3D發(fā)光水晶球動(dòng)畫(huà)

這是一款基于HTML5 Canvas的超絢麗發(fā)光水晶球動(dòng)畫(huà)，就像是酒吧里的那種水晶球射燈一樣，不停地隨機(jī)變換射出光線的顏色，給人一種非常動(dòng)感的視覺(jué)效果。整個(gè)水晶球是在Canvas畫(huà)布上繪制而成，利用CSS3的相關(guān)特性使其能夠出現(xiàn)五彩繽紛的發(fā)光動(dòng)畫(huà)，而且可以通過(guò)鼠標(biāo)滾輪來(lái)放大縮小這個(gè)水晶球，不得不說(shuō)HTML5真的是非常強(qiáng)大。

2.jQuery/CSS3實(shí)現(xiàn)漂亮字體發(fā)光特效

今天我們要來(lái)分享一款很酷的jQuery/CSS3文字發(fā)光特效，首先是加載了谷歌的公共字體庫(kù)，因此字體非常特別和漂亮，另外利用了jQuery和CSS3的相關(guān)特性，當(dāng)鼠標(biāo)滑過(guò)文字時(shí)，文字將會(huì)出現(xiàn)發(fā)光的動(dòng)畫(huà)特效，非常漂亮。

3.超絢麗CSS3多色彩發(fā)光立方體旋轉(zhuǎn)動(dòng)畫(huà)

之前我們分享過(guò)幾個(gè)不錯(cuò)的CSS3立方體動(dòng)畫(huà)，比如這款HTML5 3D立方體旋轉(zhuǎn)動(dòng)畫(huà)和HTML5 3D立方體圖片切換動(dòng)畫(huà)。今天要分享的也是一款基于CSS3的3D立方體旋轉(zhuǎn)動(dòng)畫(huà)，不同的是，這款立方體的每一個(gè)面都有不同的色彩，并且會(huì)帶有絢麗的發(fā)光特效。

4.純CSS3實(shí)現(xiàn)發(fā)光開(kāi)關(guān)切換按鈕

前段時(shí)間我們向大家分享過(guò)一款牛奶般剔透的CSS3 3D開(kāi)關(guān)按鈕，效果相當(dāng)贊。今天我們要來(lái)分享一款類似的純CSS3發(fā)光開(kāi)關(guān)切換按鈕，它的外觀就像一個(gè)電燈的開(kāi)關(guān)，可以左右切換。另外開(kāi)關(guān)上的文字還有發(fā)光的特效，整體看上去很有立體感。

5.純CSS3和SVG鼠標(biāo)滑過(guò)燈泡發(fā)光特效

這次要分享一款利用純CSS3和SVG實(shí)現(xiàn)的燈泡發(fā)光效果，我們只需要將鼠標(biāo)滑過(guò)燈泡，整個(gè)燈泡就會(huì)出現(xiàn)發(fā)光發(fā)亮的動(dòng)畫(huà)特效，效果相當(dāng)逼真。CSS3的運(yùn)用，讓燈泡外圍有一層淡淡的光暈。并且在燈光點(diǎn)亮和熄滅的時(shí)候有淡入淡出的效果。

6.HTML5 Canvas發(fā)光Loading動(dòng)畫(huà)

之前我們分享過(guò)很多基于CSS3的Loading動(dòng)畫(huà)效果，相信大家都很喜歡。今天我們要來(lái)分享一款基于HTML5 Canvas的發(fā)光Loading加載動(dòng)畫(huà)特效。Loading旋轉(zhuǎn)圖標(biāo)是在canvas畫(huà)布上繪制的，整個(gè)loading動(dòng)畫(huà)是發(fā)光3D的視覺(jué)效果，HTML5非常強(qiáng)大。

7.CSS3發(fā)光Loading加載動(dòng)畫(huà)

今天我們要分享一款與眾不同的CSS3 Loading動(dòng)畫(huà)效果，它是由幾個(gè)不同的動(dòng)畫(huà)效果組合而成的，像文字打印效果、發(fā)光效果、飛入飛出效果，這幾種效果都非常酷。另外我們可以再回顧一下其他的CSS3 Loading效果：HTML5 Canvas實(shí)現(xiàn)超酷Loading動(dòng)畫(huà)、很有個(gè)性的CSS3彈跳Loading動(dòng)畫(huà)。

8.純CSS3實(shí)現(xiàn)發(fā)光動(dòng)畫(huà)按鈕特效

這是一款基于純CSS3的發(fā)光按鈕，按鈕發(fā)光的顏色是隨機(jī)的，這樣一排按鈕就顯得五彩繽紛，非常絢麗。之前我們也介紹過(guò)不少樣式很獨(dú)特的CSS3按鈕，比如純CSS3 3D開(kāi)關(guān)按鈕、純CSS3實(shí)現(xiàn)動(dòng)感彈性按鈕等，都非常不錯(cuò)，也有HTML5動(dòng)畫(huà)按鈕，大家可以自己看看。

陜西優(yōu)就業(yè)：http://www.ujiuye.com/shaanxi/

IT學(xué)習(xí)交流：468910291

在線咨詢

上一篇：Java-WEB考點(diǎn)
下一篇：2024國(guó)際物流展會(huì)一覽表（國(guó)內(nèi)篇）丨Geek Expo

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

css實(shí)現(xiàn)發(fā)光的input輸入框

CSS樣式：

您的項(xiàng)目需求