如何在發生css轉換時阻止我的文本移動

我有一個包含兩個同時發生的css轉換的框。如何在發生css轉換時阻止我的文本移動

當轉換髮生在圖標下方的標題和段落文本移動位置

我的繼承人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> 
       <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>

繼承人我CSS

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

    } 
     .box:hover .circle{ 
      width: 100px; 
      height: 100px; 
      background: #f7f7f7; 
     } 
     .circle-pos{ 
      margin-top: -60px; 
     } 
     .box:hover .circle-pos{ 
      margin-top: -50px; 
     } 
     .box:hover .icon{ 
      font-size: 48px; 
      color: #003176; 
      padding-top: 25px; 
      padding-right: 5px; 
     } 
    .box{ 
     border: 0px 1px 2px 1px solid #f1f1f1; 
     border-top: 5px solid #003176; 
     height: 150px; 
     font-size: 18px; 
     -webkit-transition: all 300ms linear; 
     -moz-transition: all 300ms linear; 
     -o-transition: all 300ms linear; 
     -ms-transition: all 300ms linear; 
     transition: all 300ms linear; 
    } 
    .box:hover{ 
     background-color: #135379; 
     color: #b9f9ff; 
    } 

    .heading{ 
    padding: 50px 0 12px 0; 
    margin: 0 0 25px 0; 
    height: 24px; 
    position: relative; 
    text-transform: uppercase; 
    letter-spacing: -0.03em; 
    } 
    .transistion{ 
     padding-top: 60px; 
    }

我已經設定了一個固定的高度x但這並不能阻止文字移動，任何幫助或建議，將不勝感激。

來源

2014-09-27 JamesP

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

，然後這是你的CSS：

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

當然

如果需要的話，你可以做出一些改變，但是這是更或更少的要點

see fiddle

來源

2014-09-27 20:24:15 Devin

問題是你的文本是相對於圓定位的，並且該圓在過渡中變小了。你可以在你的.circle:hover{}中加入這樣的東西margin-bottom: 10px;，但是這會讓文本在轉換過程中擺動，所以我建議將文本定位爲絕對。

來源

2014-09-27 20:17:43

包裝你的圖標在容器：

<div class="icon-container"> 
     <i class="circle-pos circle glyphicon glyphicon-home icon"></i> 
</div>

，並給它一個固定的高度：

.icon-container { 
    height: 50px; // Or whatever you want 
}

工程順利，我（我只把它應用到的第一個圖標）：http://jsfiddle.net/63Lbwonf/2/ 你可以玩與數字相關。我在那裏扔了50px，它固定了容器高度，所以在動畫過程中H1不會移動。

來源

2014-09-27 20:32:28

如何在發生css轉換時阻止我的文本移動

回答

相關問題