CSS3:删除尺度上的模糊效果

Question

我有一个div。当我扩展它时，内部文字会变得模糊。我想删除比例的模糊效果。

.content_text{
  width:200px;
  height:200px;
  border:thin black solid;
  transition:all 0.6s ease;
}
.content_text:hover{
 transform:scale(1.1);
 transition:all 0.6s ease;
}

<div class="content_text">
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
</div>

任何帮助都很棒。

谢谢。

Answer 1

您需要创建另一个元素以显示动画。请根据您的要求修改以下代码。

.content_text{
  width:200px;
  height:200px;
  position:relative;
  border:1px solid red;
}
.background{
  position:absolute;
  top:0;right:0;bottom:0;left:0;z-index:1;
  border:1px black solid;
  background:silver;
  transition:all 0.6s ease;
}
.content_text:hover .background{
 transform:scale(1.1);
 transition:all 0.6s ease;
}
.content_text .content{z-index:2;position:relative;}

<div class="content_text">
  <div class="background"></div>
  <div class="content">
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
  </div>
</div>

Answer 2

在CSS动画期间没有固定文本共享的选项。它关于浏览器如何在缩放动画中渲染文本。

Answer 3

您必须在鼠标悬停上减少blur的两个选项：

首先 - 您可以将过渡设置为0.15：

transition:all 0.15s ease;

第二 - 您可以增加height，width和font-size，并在鼠标悬停时减少transition：

.content_text{
  width:200px;
  height:200px;
  border:thin black solid;
  transition:all 0.15s ease;
}
.content_text:hover{ 
 transition:all 0.15s ease;
 width: 230px;
 height: 230px;
 font-size: 18px;
}

<div class="content_text">
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
</div>