gpt4 book ai didi

html - 如何在不丢失内容的情况下通过左侧为 div 设置动画?

转载 作者:行者123 更新时间:2023-12-05 05:33:31 25 4
gpt4 key购买 nike

.redbox{
width: 100%;
background-color: red;
height: 100px;
animation-name: movereverse;
animation-duration: 5s;
position: relative;
animation-fill-mode:forwards;
animation-direction:normal;
animation-timing-function: ease-in;
overflow: hidden;
}

@keyframes movereverse{
0%{
left: 0;
}

25%{
left:250px;
}
50%{

}
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="redbox">hello</div>
</body>
</html>
我想通过动画把红框的宽度缩小到一定的宽度。比方说,我想将宽度固定为 40%,但想借助动画来显示它。我使用了 left 属性,但它在我的屏幕上溢出了。有什么方法可以将宽度固定为 100%,然后应用动画,这样它就不会溢出并且内容保留在 div 中。

最佳答案

我想这就是你要找的东西,但我不能确定,因为我读了你的问题几次,但还是有点不明白

这里:

@keyframes movereverse{
0%{
width: 100%;
left: 0;
}

100%{
width: 40%;
left: 60%;
}
}

关于html - 如何在不丢失内容的情况下通过左侧为 div 设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73823121/

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