当css转换发生时,如何阻止文本移动
我有一个盒子,里面有两个同时发生的css转换 当发生转换时,图标下方的标题和段落文本将移动位置 参见JS Fiddle: 这是我的html当css转换发生时,如何阻止文本移动,css,css-transitions,Css,Css Transitions,我有一个盒子,里面有两个同时发生的css转换 当发生转换时,图标下方的标题和段落文本将移动位置 参见JS Fiddle: 这是我的html <div class="row"> <div class="col-md-4 text-center transistion"> <div class="box"> <i class="circle-pos circle glyphic
<div class="row">
<div class="col-md-4 text-center transistion">
<div class="box">
<i class="circle-pos circle glyphicon glyphicon-home icon"></i>
<h3 class="heading">
Construction
</h3>
<p>This is how we do it</p>
</div>
</div>
<div class="col-md-4 text-center transistion">
<div class="box">
<i class="circle-pos circle glyphicon glyphicon-wrench icon"></i>
<h3 class="heading">
Interior Design
</h3>
<p>This is how we do it</p>
</div>
</div>
<div class="col-md-4 text-center transistion">
<div class="box">
<i class="circle-pos circle glyphicon glyphicon-thumbs-up icon"></i>
<h3 class="heading">
Service
</h3>
<p>This is how we do it</p>
</div>
</div>
</div>
我已将框设置为固定高度,但这不会阻止文本移动,请提供任何帮助或建议。问题在于文本相对于圆的位置,并且圆在过渡过程中变得越来越小。您可以添加如下内容
边距底部:10px
到你的.circle:悬停{}
,但这会使文本在转换过程中摆动,因此我建议将文本定位为绝对位置。为h3
和下面的文本添加一个额外的div,在这种情况下,我将其命名为.bottombox
。然后我给了它一个position:absolute
属性,这样我就可以把它从其余元素的流中去掉,这意味着它不会受到动画大小、填充和边距变化的影响
因此,您的HTML如下所示:
<div class="row">
<div class="col-md-4 text-center transistion">
<div class="box"> <i class="circle-pos circle glyphicon glyphicon-home icon"></i>
<div class="bottombox">
<h3 class="heading">
Construction
</h3>
<p>This is how we do it</p>
</div>
</div>
</div>
<div class="col-md-4 text-center transistion">
<div class="box"> <i class="circle-pos circle glyphicon glyphicon-wrench icon"></i>
<div class="bottombox">
<h3 class="heading">
Interior Design
</h3>
<p>This is how we do it</p>
</div>
</div>
</div>
<div class="col-md-4 text-center transistion">
<div class="box"> <i class="circle-pos circle glyphicon glyphicon-thumbs-up icon"></i>
<div class="bottombox">
<h3 class="heading">
Service
</h3>
<p>This is how we do it</p>
</div>
</div>
</div>
</div>
当然,如果需要的话,您可以进行一些更改,但这或多或少是它的要点
将图标包装在容器中:
<div class="icon-container">
<i class="circle-pos circle glyphicon glyphicon-home icon"></i>
</div>
对我来说效果很平滑(我只将其应用于第一个图标):
你可以玩数字游戏。我只是在那里扔了50px,它固定了容器的高度,所以H1在动画中不会移动
.icon {
font-size: 32px;
vertical-align: middle;
padding-top: 35px;
padding-right: 9px;
}
.icon:hover {
font-size: 48px;
color: #003176;
padding-top: 25px;
padding-right: 5px;
}
.circle {
width: 120px;
height: 120px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f3f3f3;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.circle:hover {
width: 100px;
height: 100px;
background: #f7f7f7;
}
.circle-pos {
margin-top: -60px;
}
.circle-pos:hover {
margin-top: -50px;
}
.box {
border: 0px 1px 2px 1px solid #f1f1f1;
border-top: 5px solid #003176;
height: 200px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
position:relative;
}
.box:hover {
background-color: #135379;
}
.heading {
padding: 60px 0 12px 0;
margin: 0 0 13px 0;
height: 24px;
text-transform: uppercase;
letter-spacing: -0.03em;
}
.bottombox {
bottom:20px;
left:0;
width:100%;
text-align:center;
position: absolute;
}
.transistion {
padding-top: 60px;
}
<div class="icon-container">
<i class="circle-pos circle glyphicon glyphicon-home icon"></i>
</div>
.icon-container {
height: 50px; // Or whatever you want
}