想縮放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>
應跨度內保持未縮放或不? – Banzay
@Banzay內部跨度不應該縮放。我只想要外部跨度縮放。 –
太棒了!所以我不會改變我的答案。它看起來正確。 – Banzay