1. 程式人生 > >css3 ----input focus的發光,縮放 效果

css3 ----input focus的發光,縮放 效果

  chrome下input focus預設有個黃色的光影,如果不想要的話 可以在css樣式中 新增一下

      input:focus{

         outline:none;

     }

  就可以去掉了!

   我的樣式程式碼:

    input{

       border-radius:6px;
       border:1px solid #909090;
       -webkit-transition: box-shadow 0.30s ease-in-out;   //只讓box-shadow屬性做過渡效果!
       -moz-transition:  box-shadow 0.30s ease-in-out;      //firefox

    }

   input :focus{

     outline:none;
     border:#87C6F9 1px solid;
     box-shadow: 0 0 8px rgba(103, 166, 217, 1);

   }

 截圖如下:

   

.searchdemo {
display:inline-block;
position:relative;
height:27px;
margin:60px;
}
.searchdemo:hover {
-webkit-box-shadow:0 0 3px #999;
-moz-box-shadow:0 0 3px #999
}
.searchdemo .sinput {
float:left;
width:130px;
height:19px;
line-height:19px;
padding:3px 5px;
border:#A7A7A7 1px solid;
background:white;
color:#888;
font-size:12px;
-webkit-transition:.3s;
-moz-transition:.3s;
outline: none;
}
.searchdemo .sinput:focus {
width:200px;
}
.searchdemo .sbtn {
cursor:pointer;
height:27px;
font-size:12px;
float:left;
width:50px;
margin-left:-1px;
background:#eee;
display:inline-block;
padding:0 12px;
vertical-align:middle;
border:#A7A7A7 1px solid;
color:#666;
}
.searchdemo .sbtn:hover {
background:#ddd;
}
<form action="/index.php" method="get"><input type="text" name="s" /> <input type="submit" value="搜尋" /></form>

相關推薦

css3 ----input focus發光 效果

  chrome下input focus預設有個黃色的光影,如果不想要的話 可以在css樣式中 新增一下       input:focus{          outline:none;      }   就可以去掉了!    我的樣式程式碼:     i

css3實現顏色漸變、元素的2D轉換(元素的旋轉移動傾斜等)、元素轉換過渡效果

一、顏色漸變:background: linear-gradient(direction, color-stop1, color-stop2, ...); 引數:direction: 方向或者角度;  color-stop1, color-stop2, ... :指定漸變的

CSS3感應滑鼠背景閃爍和圖片效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

Android 佈局手勢可滑動檢視實現類似Imgview圖片效果

Android 自定義View 佈局手勢縮放,可滑動檢視,子View實現類似Imgview圖片縮放效果 自定義View,使用ViewDragHelper和ScaleGestureDetector結合簡單的實現類似PhotoView的效果的控制元件,使佈局內的子

canvas和白鷺引擎中平移旋轉

都是 canvas 引擎 偏移 坐標 這一 text sla 偏移量 canvas中的 translate() 和白鷺引擎中的 .x 或者 .y 所導致的平移效果並不是移動 目標元素,而是移動目標元素父親所在的坐標系。 例如 bgg.translate(100,100)

UWP:使用Behavior實現FlipView簡單效果

spl send 應該 code load isp start 個性 source 先上效果圖 首先安裝Behavior SDK:在Nuget中搜索安裝 Microsoft.Xaml.Behaviors.Uwp.Managed 。 然後新建類,AnimationFlipV

css實現鼠標懸停在圖片上圖片緩慢效果

-c ack span orm 效果 border pan 鼠標懸停 round 方法一: .container{   background-size: 100% 100%;   transition: all 2s; } .container:hover{  

WPFの實現word的效果

end ati ESS ott href sta ram enable ase 原文:WPFの實現word的縮放效果ms-word做出的效果令人十分欣喜,那麽如何用wpf達到這個效果,下面我們來進行討論。 界面上我用一個WrapPanel作為父級控件,動態添加InkCan

cesium載入飛機模型entity方式和primitive方式載入至模型處

<!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- T

Android實現本地圖片選擇及預覽效果仿春雨醫生

在做專案時經常會遇到選擇本地圖片的需求,以前都是懶得寫直接呼叫系統方法來選擇圖片,但是這樣並不能實現多選效果,最近又遇到了,所以還是寫一個demo好了,以後也方便使用。還是首先來看看效果 顯示的圖片使用RecyclerView實現的,利用Glide來載入;下面彈出的圖片資料夾效果是採用

移動端點選input,select頁面會偏移的問題

最近做APP專案的時候發現在IOS端用select選擇框的時候出現選擇完頁面向左偏移的問題,設定meta標籤禁止縮放也沒用。後面通過百度查閱得知Safari瀏覽器無法通過meta屬性限制其縮放,可以在頁面中新增如下程式碼,實現縮放禁止,主要原理是:禁止兩指以上的觸控事件(因為

屬性動畫實現透明旋轉平移集合動畫

佈局檔案,設定透明,旋轉,平移,縮放,集合動畫的按鈕,再設定一個屬性動畫的imageview <?xml version="1.0" encoding="utf-8"?> <ImageButton android:id="@+id/i

CABasicAnimation的使用方法(移動旋轉

設定動畫CABasicAnimation的屬性和說明 屬性 說明 duration 動畫的時間 repeatCount 重複的次數。不停重複設定為 HUGE_VALF repeatDuratio

openGL三維網格座標旋轉燈光設定紋理讀取模型讀取(MFC單文件)

1.三維網格座標建立 2.基本3維圖形建立 3.滑鼠相應旋轉縮放 4.鍵盤相應旋轉縮放 5.燈光設定 6.紋理載入對映 7.讀取模型 關於MFC配置編寫openGL網上有很多教程 需要的函式建立一般是: OnCreat()

計算機繪圖

計算機繪圖縮放有兩種: 1、縮放資料 圖的大小不變,而圖展示的區域的大小在變化。實現原理:修改圖的比例尺,計算區域範圍,設定軸的起止值和結束值,進行繪製 2、縮放視口: 圖中的區域不變,圖的大小在變,但是圖上的內容不發生變化,如比例尺值,座標軸上的值。 縮放資料,可以想象

html5學習筆記三:canvas中平移旋轉等影象變換問題

1,儲存與恢復問題 關鍵字:save / restore save指儲存save之前的canvas狀態,restore恢復save儲存的canvas狀態。舉個例子我想在canvas中隔一秒顯示一個圖片,那我可以先用save指令儲存空白的canvas,然後在顯示一張圖片之後r

一行程式碼實現view拖拽移動、雙指效果

實現原理:通過重寫View.OnTouchListener實現拖拽與縮放效果; 注意:如果對含有子類的viewGroup設定,子類的大小可能不變,因為縮放的效果程式碼用的是view.layout(),只是改變了當前設定觸控監聽view的大小,裡面子類的大小是沒有變的; 如果想子類一起改變

Android單點觸控技術對圖片進行平移旋轉操作

相信大家使用多點對圖片進行縮放,平移的操作很熟悉了,大部分大圖的瀏覽都具有此功能,有些app還可以對圖片進行旋轉操作,QQ的大圖瀏覽就可以對圖片進行旋轉操作,大家都知道對圖片進行縮放,平移,旋轉等操作可以使用Matrix來實現,Matrix就是一個3X3的矩陣,對圖片的處理可

OpenCV2.4.13中warpAffine函式理解旋轉仿射變換保持完整圖片

本文借鑑了這裡以及這裡的內容。 問題:為什麼寫這個東西? 答:在進行模板匹配的時候,發現一個問題,對於直接從圖片中摳出的模板,匹配效果較好,但是當模板發生形變的時候,效果就不理想了。 在對模板進行形變處理的時候,發現利用 warpAffine得到的結果並不

矩陣運算——平移旋轉

平時開發程式,免不了要對影象做各種變換處理。有的時候變換可能比較複雜,比如平移之後又旋轉,旋轉之後又平移,又縮放。 直接用公式計算,不但複雜,而且效率低下。這時可以藉助變換矩陣和矩陣乘法,將多個變換合成一個。 最後只要用一個矩陣對每個點做一次處理就可以得到想要的結果。