动画课题令人烦恼的孩子元素

想缩放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和:last-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

我很感谢你的努力。谢谢回答。 –

。 ..还是，这是我的在不改变标记结构的情况下尝试一下CSS，调整span > span（从顶部/左侧50％，然后使用translate()定位）的位置。另外，我也假设你想让这个数字增长。

.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

动画课题令人烦恼的孩子元素

回答

相关问题