CSS3 input 輸入框藍光特效
阿新 • • 發佈：2019-01-27
有時候我們在做 Java Web 小專案開發的時候，可能在設計前端的時候苦於沒有好的佈局、色彩搭配，跟接地氣的說法就是做的介面比較 高大上！
那麼平時我們就要注意積累自己的素材了！下面這個HTML網頁輸入框以及按鈕的色彩搭配感覺挺好，可以收藏。我們一起看下：
執行結果 ：
原始碼 ：
註釋 ：<!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;
- 相容Safari、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：（該值允許你去自定義一個時間曲線）瞭解。
- border-radius（圓角屬性）
- 屬性值範圍：1 - 4
- 舉例 ： border-radius : 25px 10px 50px 0; // 025px（左上角）、10px（右上角）、50px（右下角）、0左下角(順時針順序)
- outline（輪廓）
- 繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。輪廓線不佔據空間，也不一定是矩形。
- 可以按以下順序設定如下屬性
- outline-color
- outline-style
- outline-width
- text-decoration
- 所有主流瀏覽器都支援 text-decoration 屬性。
- text-decoration 屬性規定新增到文字的修飾。
- 修飾的顏色由 "color" 屬性設定。
- rgba
- RGBA是代表Red（紅色） Green（綠色） Blue（藍色）和 Alpha的色彩空間
- R：紅色值。正整數 | 百分數
- G：綠色值。正整數 | 百分數
- B：藍色值。正整數| 百分數
- A：透明度。取值0~1之間
- :hover 選擇器
- 用於選擇滑鼠指標浮動在上面的元素。
- :hover 選擇器可用於所有元素，不只是連結。
- :link 選擇器設定指向未被訪問頁面的連結的樣式。
- :visited 選擇器用於設定指向已被訪問的頁面的連結，
- :active 選擇器用於活動連結。
- 在 CSS 定義中，:hover 必須位於 :link 和 :visited 之後（如果存在的話），這樣樣式才能生效。