gpt4 book ai didi

html - 将 CSS 从中心增长到固定宽度

转载 作者:太空宇宙 更新时间:2023-11-04 01:54:03 28 4
gpt4 key购买 nike

我有下面的悬停效果,效果很好。但是,我正在尝试添加固定宽度的蓝线。例如最大宽度为 100px。当我尝试修改下面的代码时,动画中断并且不会从中心增长。

关于如何修复下面的代码以使其从中心到固定宽度的动画有什么想法吗?

body {
width:100%;
}

div {
display:block;
position:absolute;
top:45%;
left:50%;
border-bottom:4px solid blue;
width:0%;
text-align:center;
animation: line 2s linear forwards;
}

@keyframes line {
from {
left:50%;
width:0%;
}
to {
left:5%;
width:90%;
}
}
<div>Heading</div>

最佳答案

解决方案一

只需添加一个额外的 span 元素即可限制宽度:

body {
width: 100%;
}

div {
display: block;
position: absolute;
top: 45%;
left: 50%;
width: 0%;
animation: line 2s linear forwards;
}

.heading {
display: block;
text-align: center;
max-width: 200px;
border-bottom: 4px solid blue;
margin: 0px auto;
}

@keyframes line {
from {
left: 50%;
width: 0%;
}
to {
left: 5%;
width: 90%;
}
}
<div><span class="heading">Heading</span></div>

解决方案2

不要使用绝对定位来使您的 div 居中:

div {
display: block;
width: 0%;
animation: line 2s linear forwards;
text-align: center;
max-width: 200px;
border-bottom: 4px solid blue;
margin: 0px auto;
}

@keyframes line {
from {
width: 0%;
}
to {
width: 90%;
}
}
<div>Heading</div>

关于html - 将 CSS 从中心增长到固定宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42910128/

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