アニメーションの問題は、子要素を妨害しています

h6の子であるスパンをスケールしたかったです。しかし、どこかに影響を与える私のスパンは、内側のスパンです。アニメーションの問題は、子要素を妨害しています

<style> 
 
.block { 
 
margin-top: 0; 
 
padding: 0; 
 
background: #39b4bf; 
 
} 
 

 
.block h6 { 
 
border: 3px solid #fff; 
 
display: inline-block; 
 
border-radius: 50%; 
 
margin: 0 0 50px; 
 
padding: 25px; 
 
height: 215px; 
 
width: 212px; 
 
position: relative; 
 
transition: all .3s; 
 
overflow: hidden; 
 
box-sizing: border-box; 
 
} 
 

 
.block h6 > span { 
 
color: #39b4bf; 
 
font-size: 34px; 
 
background: #74cad2; 
 
padding: 54px 54px; 
 
border-radius: 50%; 
 
display: inline-block; 
 
border: 25px solid #39b4bf; 
 
} 
 

 
.block h6 > span > span { 
 
position: absolute; 
 
color: #39b4bf; 
 
font-size: 34px; 
 
background: #fff; 
 
padding: 36px 20px; 
 
border-radius: 50%; 
 
display: inline-block; 
 
left: 50px; 
 
top: 49px; 
 
} 
 

 
.block h6:hover { 
 
    border-color: #74cad2; 
 
    /*animation: border .3s cubic-bezier(.32,1.63,.44,1.82);*/ 
 
} 
 

 
.block h6:hover > span { 
 
    border-color: #74cad2; 
 
    animation: bordereffect .6s; 
 
} 
 

 
@-webkit-keyframes bordereffect { 
 
0% { 
 
    -webkit-transform: scale(1); 
 

 
} 
 
50% { 
 
    -webkit-transform: scale(1.5); 
 

 
} 
 
100% { 
 
    -webkit-transform: scale(1); 
 

 
} 
 
} 
 
</style> 
 
<div class="col-md-5 block block-one text-center"> 
 
      <h6> 
 
      <span><span><strong class="fig-number">27</strong>%</span></span> 
 
      </h6> 
 
      <p> 
 
      <span>Employer said</span> 
 
      a bad hire cost them more than $50,000 
 
      </p> 
 
     </div>

出典

2017-02-10 priya_singh

内部スパンはスケーリングされていないかどうか滞在する必要がありますか？ – Banzay

@Banzay内部スパンは縮尺すべきではありません。私は外側スパンだけを拡大縮小したい。 –

素晴らしい！だから私は私の答えを変えないだろう。それは正しいように見える。 – Banzay

あなたはこれらのスパンの兄弟（ネストしていない）を作成し、:first-childとh6

.block { 
 
margin-top: 0; 
 
padding: 0; 
 
background: #39b4bf; 
 
} 
 

 
.block h6 { 
 
border: 3px solid #fff; 
 
display: inline-block; 
 
border-radius: 50%; 
 
margin: 0 0 50px; 
 
padding: 25px; 
 
height: 215px; 
 
width: 212px; 
 
position: relative; 
 
transition: all .3s; 
 
overflow: hidden; 
 
box-sizing: border-box; 
 
} 
 

 
.block h6 span:first-child { 
 
color: #39b4bf; 
 
font-size: 34px; 
 
background: #74cad2; 
 
padding: 54px 54px; 
 
border-radius: 50%; 
 
display: inline-block; 
 
border: 25px solid #39b4bf; 
 
} 
 

 
.block h6 span:last-child { 
 
position: absolute; 
 
color: #39b4bf; 
 
font-size: 34px; 
 
background: #fff; 
 
padding: 36px 20px; 
 
border-radius: 50%; 
 
display: inline-block; 
 
left: 50px; 
 
top: 49px; 
 
} 
 

 
.block h6:hover { 
 
    border-color: #74cad2; 
 
    /*animation: border .3s cubic-bezier(.32,1.63,.44,1.82);*/ 
 
} 
 

 
.block h6:hover span:first-child { 
 
    border-color: #74cad2; 
 
    animation: bordereffect .6s; 
 
} 
 

 
@-webkit-keyframes bordereffect { 
 
0% { 
 
    -webkit-transform: scale(1); 
 

 
} 
 
50% { 
 
    -webkit-transform: scale(1.5); 
 

 
} 
 
100% { 
 
    -webkit-transform: scale(1); 
 

 
} 
 
}

<div class="col-md-5 block block-one text-center"> 
 
      <h6> 
 
       <span></span> 
 
       <span><strong class="fig-number">27</strong>%</span> 
 
      </h6> 
 
      <p> 
 
      <span>Employer said</span> 
 
      a bad hire cost them more than $50,000 
 
      </p> 
 
     </div>

出典

2017-02-10 10:25:14 Banzay

私はあなたに努力を感謝します。回答ありがとうございます。 –

それにビートされての:last-childにスタイルを適用することができます。 ..まだ、ここに私ですあなたのマークアップ構造を変更せずに、ちょうど少しのCSSを使って、span > span（上/左から50％、それからで配置）の位置を調整してみてください。また、数字も伸びたかったと思っていました。

.block { 
 
margin-top: 0; 
 
padding: 0; 
 
background: #39b4bf; 
 
} 
 

 
.block h6 { 
 
border: 3px solid #fff; 
 
display: inline-block; 
 
border-radius: 50%; 
 
margin: 0 0 50px; 
 
padding: 25px; 
 
height: 215px; 
 
width: 212px; 
 
position: relative; 
 
transition: all .3s; 
 
overflow: hidden; 
 
box-sizing: border-box; 
 
} 
 

 
.block h6 > span { 
 
color: #39b4bf; 
 
font-size: 34px; 
 
background: #74cad2; 
 
padding: 54px 54px; 
 
border-radius: 50%; 
 
display: inline-block; 
 
border: 25px solid #39b4bf; 
 
} 
 

 
.block h6 > span > span { 
 
position: absolute; 
 
color: #39b4bf; 
 
font-size: 34px; 
 
background: #fff; 
 
padding: 36px 20px; 
 
border-radius: 50%; 
 
display: inline-block; 
 
left: 50%; 
 
top: 50%; 
 
-webkit-transform: translate(-50%, -50%); 
 

 
} 
 

 
.block h6:hover { 
 
    border-color: #74cad2; 
 
    /*animation: border .3s cubic-bezier(.32,1.63,.44,1.82);*/ 
 
} 
 

 
.block h6:hover > span { 
 
    border-color: #74cad2; 
 
    animation: bordereffect .6s; 
 
} 
 

 
@-webkit-keyframes bordereffect { 
 
0% { 
 
    -webkit-transform: scale(1); 
 

 
} 
 
50% { 
 
    -webkit-transform: scale(1.5); 
 

 
} 
 
100% { 
 
    -webkit-transform: scale(1); 
 
} 
 
}

<div class="col-md-5 block block-one text-center"> 
 
    <h6> 
 
    <span><span><strong class="fig-number">27</strong>%</span></span> 
 
    </h6> 
 
    <p> 
 
    <span>Employer said</span> 
 
    a bad hire cost them more than $50,000 
 
    </p> 
 
</div>

出典

2017-02-10 10:27:34 Connum

アニメーションの問題は、子要素を妨害しています

答えて

関連する問題