Question

我正在尝试创建类似于bootstrap输入的东西。当用户点击输入时，它将发挥良好的过渡和发光。我得到了所有的样式，但转换显示出奇怪，但所有其他网站正确地设置了动画。我的框阴影显示速度非常快然后变暗了但是This link这里的所有内容都正常工作，但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;
}

顺便说一句，我使用最新版本的谷歌浏览器。

Answer 1

这与你原始的盒子阴影有关。浏览器似乎无法在插入和非插入框阴影之间进行转换，只是不尝试。虽然有一个简单的解决方法 - 将原始的盒子阴影重新添加到聚焦样式中：

.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;
}

这会保留你已经存在的盒子阴影（被你的焦点框阴影覆盖/替换），并且在焦点上添加新的盒子阴影，它正确地淡入当你在框中点击时出来。

CSS过渡制作奇怪的效果？

1 个答案: