Question

我正在尝试创建一个网络应用，当将鼠标悬停在按钮上或专注于表单字段时，它会有一些简单，漂亮的过渡效果。

如果表单字段位于页面上的常规div中并且您关注它，则表单字段“弹出”就可以了，并且没有任何问题。

但是，当表单字段位于悬停过渡期间弹出的灯箱中时，灯箱中的所有文本都会变得模糊。一旦转换完成，它就会停止模糊。

您的一些例子：

<div>
    <b>First Name:</b>
    <input type="text">
<div>

以上工作正常。当专注于文本字段时，它会“弹出”transform: translate(-2px,-2px);就好了，根本没有模糊。

<div class="lightbox">
    <div class="lightbox-content">
        <b>Option 1:</b>
        <input type="text">
    </div>
</div>

上述情况不正常。在transform: translate(-2px,-2px)期间，该灯箱中的所有文本/元素等都会在过渡的0.5秒内变得模糊。

以下是我目前使用的款式：

.lightbox {
 position: fixed;
 top: 0;
 left: 0;
 background-color: rgba(0,0,0,0.3);
 width: 100%;
 height: 100%;
 transform: translateY(-105%);
 -webkit-transform: translateY(-105%);
 transition: transform 0.001s, opacity 0.75s;
 -webkit-transition: transform 0.001s, opacity 0.75s;
 opacity: 0;
}

.lightbox-content {
 max-height: 80%; 
 overflow: auto; 
 position: absolute; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 background: white;
 border-radius: 10px 0 10px 0;
 padding: 10px;
}

你可以在这里查看一个简单的jsfiddle .. https://jsfiddle.net/uneeuh08/它可能不是很好的代码，因为我复制并粘贴了我需要显示的内容。它在jsfiddle网站上并没有那么糟糕，因为它在我们的网站上由于某种原因，但它仍然存在一点点。只是烦我。

Answer 1

选中 JSFiddle 。

您可以将 display : flex;属性与 align-items : center;和 {{1 }} justify-content。

您的CSS课程将成为：

: center;

在某些元素Webkit上转换期间的模糊文本

1 个答案: