2
divでテキストのサイズを変更する正しい方法は何ですか？私は以下のコードを使用しますが、サイズ変更時にフォントの歪みが目立ちます。アニメーション中にそのようなフォントが変わったようです。また、円の中にちらつきがあります。この効果はOSXでは実際には見えませんが、Windowsマシン上で起こります。どうすれば修正できますか？そのようなわずかな割合のdivのサイズをテキストでアニメーション化する正しい方法
.content-no-btn {
transition: all .2s ease-in-out;
}
.content-no-btn:hover {
transform: scale(1.05);
}
.entry-content {
border-style: solid;
border-color: #bbb;
border-width: 0px 3px 3px 3px;
padding-top: 20px;
}
#price {
text-align: center;
}
.plan {
display: inline-block;
margin: 10px 1%;
font-family: 'Lato', Arial, sans-serif;
}
.plan-inner {
background: #fff;
margin: 0 auto;
min-width: 280px;
max-width: 100%;
position: relative;
}
.entry-title {
background: #53CFE9;
height: 140px;
position: relative;
text-align: center;
color: #fff;
margin-bottom: 0px;
}
.entry-title>h3 {
background: #20BADA;
font-size: 20px;
padding: 5px 0;
text-transform: uppercase;
font-weight: 700;
margin: 0;
}
.entry-title .price {
position: absolute;
bottom: -25px;
background: #20BADA;
height: 95px;
width: 95px;
margin: 0 auto;
left: 0;
right: 0;
overflow: hidden;
border-radius: 50px;
border: 4px solid #fff;
line-height: 80px;
font-size: 23px;
font-weight: 700;
}
.price span {
position: absolute;
font-size: 8px;
bottom: -10px;
left: 30px;
font-weight: 400;
}
.entry-content {
color: #323232;
padding-top: 20px;
}
.entry-content ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.entry-content li {
border-bottom: 1px solid #E5E5E5;
padding: 10px 0;
}
.entry-content li:last-child {
border: none;
}
.btn {
padding: 5em 0 5em 0;
text-align: center;
}
.btn a {
background: #323232;
padding: 10px 30px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none
}
.hot {
position: absolute;
top: -7px;
background: #F80;
color: #fff;
text-transform: uppercase;
z-index: 2;
padding: 2px 5px;
font-size: 9px;
border-radius: 2px;
right: 10px;
font-weight: 700;
}
.basic .entry-title {
background: #f37920;
}
.basic .entry-title > h3 {
background: #E7680C;
}
.basic .price {
background: #f37920;
}
.standard .entry-title {
background: #4484c1;
}
.standard .entry-title > h3 {
background: #3772aa;
}
.standard .price {
background: #3772aa;
}
.ultimite .entry-title > h3 {
background: #DD4B5E;
}
.ultimite .entry-title {
background: #F75C70;
}
.ultimite .price {
background: #DD4B5E;
}
.gratitude {
padding: 5em 20px 5em 20px;
height: 300px;
text-align: center;
background-color: #f8f9f9;
}
.orderDetailsContent {
max-width: 800px;
text-align: center;
display: table;
position: relative;
margin: auto;
}<div id="price">
<!--price tab-->
<div class="plan">
<div class="plan-inner">
<div class="content-no-btn">
<div class="entry-title first-entry-title">
<h3>WHATUP </h3>
<div class="price">$0.99<span></span>
</div>
</div>
<div class="entry-content first-entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
<a href="#">Order Now</a>
</div>
</div>
</div>
<!-- end of price tab-->
<!--price tab-->
<div class="plan basic">
<div class="plan-inner">
<div class="content-no-btn">
<div class="entry-title">
<h3>YEAH </h3>
<div class="price">$1.99<span></span>
</div>
</div>
<div class="entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
<a href="#">Order Now</a>
</div>
</div>
</div>
<!-- end of price tab-->
<!--price tab-->
<div class="plan standard">
<div class="plan-inner">
<div class="content-no-btn">
<div class="hot">hot</div>
<div class="entry-title">
<h3>Superduper</h3>
<div class="price">$2.99<span></span>
</div>
</div>
<div class="entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
<a href="#">Order Now</a>
</div>
</div>
</div>
<!-- end of price tab-->
<!--price tab-->
<div class="plan ultimite">
<div class="plan-inner">
<div class="content-no-btn">
<div class="entry-title">
<h3>JustGreat</h3>
<div class="price">$3.99<span></span>
</div>
</div>
<div class="entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
<a href="#">Order Now</a>
</div>
</div>
</div>
<!-- end of price tab-->
</div>
<div class="gratitude"></div>
初期尺度を1未満に設定してから、1にアニメートしてみてください。 – connexo
ありがとうございました。私はこれが問題を解決するとは思わない。 – sanjihan
'scale'の最終値を' 1'にし、 '.95'か何かで始める。そして、あなたはgpuレンダリングを強制するために 'scale'の代わりに' scale3d'を使うことができます。 – LuudJacobs