gpt4 book ai didi

html - 如何防止 css 元素在过渡期间移动

转载 作者:太空宇宙 更新时间:2023-11-04 16:25:06 25 4
gpt4 key购买 nike

当我在 css 元素上使用 Transition 时,它下面的东西会移动。这是 JSFiddle 上的一个例子: http://jsfiddle.net/pgdxd7su/ (看看 JSFiddle 那个。代码片段似乎不起作用)

h1{
font-size
}
h1:hover{
display: inline;
font-size: 3em;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
<!DOCTYPE html>
<body>
<h1>Hello</h1>
<hr>
</body>

有没有办法解决这个问题并防止 hr 移动?

最佳答案

嗯,简单的跨浏览器答案是将您的 HTML 标记更改为:

 <div id="h1box">
<h1>Hello</h1>
</div>

然后您可以像这样使用您的 CSS:

#h1box {
position:relative;
height:80px;
border-bottom:1px solid #333;
}
h1 {
position:absolute;
top:5px left:5px;
}
h1:hover {
display: inline;
font-size: 3em;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}

基本上我们摆脱了 hr 元素的浏览器渲染之间的差异,使用更简单和容易适应的元素,如 div,然后去除元素的流动通过将 position:absolute 应用于 h1 元素,这样动画就不会影响它下面的任何内容。简单的跨浏览器解决方案,在每个浏览器中看起来都一样。

See fiddle here

关于html - 如何防止 css 元素在过渡期间移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25965964/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com