天天看點

CSS3 input 輸入框藍光特效

???跺????浠??ㄥ?? Java Web 灏?椤圭??寮??????跺??锛????藉?ㄨ?捐?″??绔????跺?????娌℃??濂界??甯?灞????插僵????锛?璺??ュ?版???璇存?灏辨?????????㈡??杈? 楂?澶т?锛?

?d?骞蟲?舵??浠?灏辮?娉ㄦ??绉?绱???宸辯??绱???浜?锛?涓??㈣?涓?HTML缃?椤佃??ユ?浠ュ?????????插僵??????瑙??哄ソ锛???浠ユ?惰??????浠?涓?璧風??涓?锛?

杩?琛?缁??? 锛?

CSS3 input 輸入框藍光特效

婧?浠g?? 锛?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3 input杈??ユ??????規??</title>
<style type="text/css">
input{
  transition:all 0.30s ease-in-out; <!-- -->
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  border:#35a5e5 1px solid;
  border-radius:3px;
  outline:none;
}
input:focus{
  box-shadow:0 0 5px rgba(81, 203, 238, 1);
  -webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1);
  -moz-box-shadow:0 0 5px rgba(81, 203, 238, 1);
}
a{
  text-decoration:none;
  background:rgba(81, 203, 238, 1);
  color:white;padding: 6px 25px 6px 25px;
  font:12px '寰?杞???榛?';
  border-radius:3px;
  -webkit-transition:all linear 0.30s;
  -moz-transition:all linear 0.30s;
  transition:all linear 0.30s;
}
a:hover{background:rgba(39, 154, 187, 1);}
</style>
</head>
<body>

<div style="width:520px;height:34px;margin:40px auto 0 auto;">
  <input type="text" placeholder="?ㄦ?峰??????浠跺?闆??"  style="height:25px"/>
  <input type="password" placeholder="璇瘋??ュ????"  style="height:25px"/>
  <a href="#">?婚??</a>
</div>
<div style="text-align:center;margin:350px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>???ㄦ?瑙????IE8??360??FireFox??Chrome??Safari??Opera???叉父????????涓???涔?绐?. </p>
</div>
</body>
</html>      
  • shadow锛?浣??ㄤ?color??x??y????blur锛?妯$?锛?灞??э?濡?锛?text-shadow
  • moz-transition:height 2s; ? ?/* ?煎?矽?????? Firefox 4 */
  • -webkit-transition:height 2s; ? ? /* ?煎??Safari and Chrome */
  • -o-transition:width 2s; ? ? /* ?煎??Opera */
  • 涓句?锛?
  • 姣?濡?浣?????transition:width 2s;
  • ?煎?矽??????????锛?-moz-transition:width 2s;
  • ?煎??afari??Chrome 锛?-webkit-transition:width 2s;
  • ?煎??Opera 锛?-o-transition:width 2s;
  • transition-timing-function ???ㄦ?
  • ??璁鎬??規???堕?寸???ㄨ??繪?瑰??灞??у?肩?????㈤????锛?6涓????藉?鹼?
  • ease锛?锛???娓??????榛?璁ゅ?鹼?ease?芥?扮????浜?璐?濉?灏??茬嚎(0.25, 0.1, 0.25, 1.0)锛?
  • linear锛?锛?????锛?锛?linear ?芥?扮????浜?璐?濉?灏??茬嚎(0.0, 0.0, 1.0, 1.0)锛?
  • ease-in锛?(????)锛?ease-in ?芥?扮????浜?璐?濉?灏??茬嚎(0.42, 0, 1.0, 1.0)锛?
  • ease-out锛?锛?????锛?锛?ease-out ?芥?扮????浜?璐?濉?灏??茬嚎(0, 0, 0.58, 1.0)锛?
  • ease-in-out锛?锛??????跺??????锛?锛?ease-in-out ?芥?扮????浜?璐?濉?灏??茬嚎(0.42, 0, 0.58, 1.0)锛?
  • cubic-bezier锛?锛?璇ュ?煎??璁鎬??昏??瀹?涔?涓?涓??堕?存?茬嚎锛?浜?瑙c??
  • border-radius锛???瑙?灞??э?
  • 灞??у?艱???達?1 - 4
  • 涓句? 锛??border-radius : 25px 10px 50px 0; // 025px锛?宸??瑙?锛???10px锛??充?瑙?锛???50px锛??充?瑙?锛???0宸??瑙?(椤烘?堕??椤哄?)
  • outline锛?杞?寤?锛?
  • 缁??朵???绱??ㄥ?寸??涓??$嚎锛?浣?浜?杈規?杈圭???澶??達???璧峰?扮???哄??绱???浣??ㄣ??杞?寤?绾誇?????绌洪?達?涔?涓?涓?瀹????╁艦??
  • ??浠ユ??浠ヤ?椤哄?璁劇疆濡?涓?灞???/li>
  • outline-color
  • outline-style
  • outline-width
  • text-decoration
  • ????涓繪?娴?瑙??ㄩ?芥???? text-decoration 灞??с??
  • text-decoration 灞??ц?瀹?娣誨???版??????淇?楗般??
  • 淇?楗扮??棰??茬??"color" 灞??ц?劇疆??
  • rgba
  • RGBA??浠h〃Red锛?绾㈣?詫? Green锛?缁胯?詫? Blue锛????詫??? Alpha???插僵绌洪??/li>
  • R锛?绾㈣?插?箋??姝f?存??| ?懼????/li>
  • G锛?缁胯?插?箋??姝f?存??| ?懼????/li>
  • B锛????插?箋??姝f?存?? ?懼????/li>
  • A锛?????搴???????~1涔???/li>
  • :hover ???╁??/li>
  • ?ㄤ????╅???????娴??ㄥ?ㄤ??㈢????绱???
  • :hover ???╁?ㄥ???ㄤ???????绱?锛?涓??????炬?ャ??
  • :link ???╁?ㄨ?劇疆??????琚?璁塊??椤甸?㈢???炬?ョ???峰???
  • :visited ???╁?ㄧ?ㄤ?璁劇疆????宸茶?璁塊????椤甸?㈢???炬?ワ?
  • :active ???╁?ㄧ?ㄤ?娲誨?ㄩ?炬?ャ??
  • ??CSS 瀹?涔?涓?锛?:hover 蹇?椤諱?浜? :link ?? :visited 涔???锛?濡???瀛??ㄧ??璇?锛?锛?杩??鋒?峰????界??????