当css转换发生时，如何阻止我的文本移动 [英] How do I stop my text from moving when css transition occurs

问题描述

我有一个框，其中有两个单独的css transistions同时发生。

I have a box with two separate css transistions that occur at the same time.

当转换发生时，图标下面的标题和段落文本移动位置

请参阅JS Fiddle： http://jsfiddle.net/Lsnbpt8r/

When the transitions occur the heading and paragraph text underneath the icon moves position

回到我的html

Heres my html

剩下我的css

Heres my 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; }

推荐答案

为 h3

解决方案

添加额外的div， / code>和下面的文本，在这种情况下，我命名为 .bottombox 。然后我给它一个 position：absolute 属性，所以我可以把它从剩余的元素流，意味着它不会受到大小的变化，padding

Add an additional div for the h3 and the text below, in this case I have named it .bottombox. Then I gave it a position:absolute property so I can take it out of the flow of the remaining elements, meaning it won't be affected by the changes in size, padding and margin of your animation.

因此，您的HTML如下所示：

Thus, your HTML goes like this:

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

---

>

---

and then this is your 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;
}

当然你可以根据需要做一些修改，

of course you can make some changes if needed, but this is more or less the gist of it

see fiddle

这篇关于当css转换发生时，如何阻止我的文本移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！