Question

我有一个div。当我缩放它时，里面的文字变得模糊。我想在比例上消除模糊效果。

＆＃13;

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

＆＃13;

<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>

＆＃13;

任何帮助都会很棒。

谢谢。

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>

CSS3：删除模糊效果

3 个答案: