Question

我正在玩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>

Answer 1

您可以实现此目的的一种方法是将线的初始位置设置在正中心，然后将其延伸到视口的顶部和底部。

.myLine {
  position: absolute;
  left: 50vw;
  top: 50vh;
  width: 1px;
  height: 1px;
}

然后，您可以通过改变位置和高度的JavaScript添加一个类extended，从而使其看起来从中心垂直延伸。

.extended {
    top: 0vh;
    bottom: 100vh;
    height: 100%;

    transition: all 3s ease;
}

使用JavaScript，就像我在这里完成的那样，你可以设置一个短暂的超时，并在超时结束后添加类。

var el = document.querySelector('.myLine');

setTimeout(function() {
 el.classList.add('extended');
}, 300);

请参阅我的示例codepen。

Answer 2

试试这个，

<div class="vertical-line"></div>
<style>
    .vertical-line {
        position: absolute;
        top: 0;
        border: 5px solid red;
        width: 10px;
        border-radius: 4px;
        animation: grow 3s infinite alternate;
    }

    @keyframes grow {
        0% {
            width: 0px;
            height: 0px;
        }
        100% {
            width: 20px;
            height: 100%;
        }
    }
</style>

Answer 3

你的代码出了什么问题，你只是增加了高度。为了在增加高度的同时在两侧生长，您必须将该元件朝向相对侧移动示例：如果您将高度增加100px，则必须相反移动50px左右

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那么它将从底部增长。我希望这有帮助

如何使用css动画从中心增加边界线

3 个答案: