我正在玩CSS动画，我想知道是否有一种方法可以使垂直线(具有一定高度)在页面加载时自动增长长度。理想情况下，我希望垂直线从中间增长，并从顶部和底部增长到特定高度。到目前为止我只能让它从上到下增加长度。这是我所拥有的:
.vertical-line {
margin-left: 100px;
background: red;
width: 8px;
border-radius: 4px;
animation: grow 4s forwards;
}
@keyframes grow {
0% {
height: 10px;
}
100% {
height: 100px;
}
}<!DOCTYPE html>
<html>
<head>
<title>Creating Vertical borders using animation/javascript</title>
</head>
<body>
<div class="vertical-line"></div>
</body>
</html>最佳答案
您的代码有什么问题是您只是增加了高度。
为了在增加高度的同时在两侧生长，您必须将该元素移向另一侧
示例:如果您要增加高度 100 像素，那么您必须向相反方向移动 50 像素
CSS:
#cool
{
height:10px;
width:10px;
border-radius:4px;
margin-left:10%;
background-color:#431;
margin-top:20%;
animation:grow 3s forwards;
position:relative;
}
@keyframes grow
{
0% {
height: 0px;
top:0;
}
100%{
height: 200px;
top:-100px;
}
}
</style>
HTML:
<div id=cool>
</div>
</body>
对于高度 100px ，将元素顶部移动 -50px 。取一半，是为了显示两边的生长情况。如果顶部为-100px，那么它将从底部开始增长。
我希望这有帮助
关于javascript - 如何使用CSS动画从中心增加边框线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37313122/