html - CSS3 : remove blur effect on scale

Question

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

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