如何在鼠標懸停時平滑插入框陰影效果？

Question

如何在此網站上創建平滑的文本輸入框陰影效果

Answer 1

使用CSS3：

#element {
/* all your styles.. */
-webkit-transition:0.2s linear;
-moz-transition:0.2s linear;
-o-transition:0.2s linear;
transition:0.2s linear;
}

#element:hover {
-webkit-box-shadow:0 0 5px blue;
-moz-box-shadow:0 0 5px blue;
-o-box-shadow:0 0 5px blue;
box-shadow:0 0 5px blue;
}

Answer 2

嘗試在那里使用Firebug或類似工具。

您聲明一些初始的“不可見”框陰影及其可見副本，並另外聲明一些過渡：

.elem {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: box-shadow 0.2s linear 0s;
}
.elem:hover {
    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}

此樣式是從該站點提取的。

編輯：您希望將鼠標懸停而不是集中精力。

Answer 3

.element
{
   background-color: #fff;
   border: 1px solid #ccc;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
   -webkit-transition: border linear .2s,box-shadow linear .2s;
   -moz-transition: border linear .2s,box-shadow linear .2s;
   -o-transition: border linear .2s,box-shadow linear .2s;
   transition: border linear .2s,box-shadow linear .2s;
}
.elem:hover 
{
    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}