0

我正在尝试创建类似于引导输入的东西。当用户点击输入时，它会播放一个漂亮的过渡和发光。我把所有的样式都放下了，但是过渡显得很奇怪，但所有其他网站都正确地对其进行了动画处理。我的盒子阴影显示得非常快，然后变暗，但在这个链接上一切正常，但在http://67.184.73.19/Website/Login/它的动画与之前的链接不同。我在下面有一些代码。

CSS 输入

.Field {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
min-height:34px;
padding:7px 8px;
outline:none;
color:#333;
background-color:#fff;
background-repeat:no-repeat;
background-position:right center;
border:1px solid #ccc;
border-radius:3px;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.075);
-moz-box-sizing:border-box;
box-sizing:border-box;
vertical-align:middle;  
}

.Field:focus {
box-shadow:0 0 10px rgba(0,153,255,.75);
border:1px solid #09F;
}

顺便说一句，我使用的是最新版本的 Google Chrome。

4

1 回答 1

3

这与插入的原始框阴影有关。浏览器似乎在插入和非插入框阴影之间转换时遇到了麻烦，只是没有尝试。不过有一个简单的解决方法 - 为焦点样式添加原始框阴影：

.Field:focus {
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075), 0 0 10px rgba(0,153,255,.75);
    border: 1px solid #09F;
}

这会保留您已经拥有的框阴影（它被您的焦点框阴影覆盖/替换）并将新的框阴影添加到焦点上，当您单击框时，它会正确淡入和淡出。

于 2013-03-21T00:58:52.450 回答