css - 动画问题正在干扰子元素

Question

我想缩放作为 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>

Answer 1

您可以使这些 span 成为 sibling (未嵌套)并将样式应用于 h6 的 :first-child 和 :last-child/p>

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