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 之後(如果存在的話),這樣樣式才能生效。