Question

我想创建一个矩形并为线图设置动画。线应从矩形垂直向上和向下生长。总的来说，我想增加2条线，减少2条线。

这是我当前的脚本：

.content {
  position: fixed;
  background-color: #dd8341;
  top: 40%;
  width: 100%;
  height: 20%;
  padding: 20px;
}

.vertline {
  width: 2px;
  margin-left: 10%;
  background-color: #dd8341;
  top: 40%;
  animation:lineup 3s forwards;
  position: relative;
}

@keyframes lineup {
  0% {
    height: 0px;
  }
  100% {
    height: 200px;
  }
}

<div class="content"></div>
<div class="vertline"></div>

我无法正确对齐所有元素。做这个简单任务的正确方法是什么？

Answer 1

这是一个只有背景和渐变的想法：

.content {
  position: fixed;
  width:100%;
  height:100vh;
  background-image:
    linear-gradient(#dd8341,#dd8341),
    linear-gradient(#dd8341,#dd8341),
    linear-gradient(#dd8341,#dd8341);
  background-position:center, 10% center,calc(10% + 4px) center;
  background-size:100% 40%,2px 0,2px 0;
  background-repeat:no-repeat;
  animation:lineup 2s forwards linear;
}

@keyframes lineup {
 to {
    background-size:100% 40%,2px 100%,2px 100%;
  }
}

<div class="content"></div>

更新

要添加延迟，只需在动画中添加更多状态：

.content {
  position: fixed;
  width:100%;
  height:100vh;
  background-image:
    linear-gradient(#dd8341,#dd8341),
    linear-gradient(#dd8341,#dd8341),
    linear-gradient(#dd8341,#dd8341);
  background-position:center, 20% center,80% center;
  background-size:100% 40%,2px 0,2px 0;
  background-repeat:no-repeat;
  animation:lineup 2s forwards linear;
}

@keyframes lineup {
 50% {
    background-size:100% 40%,2px 100%,2px 0%;
  }
  to {
    background-size:100% 40%,2px 100%,2px 100%;
  }
}

<div class="content"></div>

Answer 2

您可以使用:before和:after 伪元素上下移动，而{{ 1}}创建两行：

background: linear-gradient()

.content {
  position: fixed;
  background-color: #dd8341;
  top: 40%;
  width: 100%;
  height: 20%;
  padding: 20px;
}

.content:before,
.content:after {
  content: "";
  width: 6px; /* color white ("no color") color (each 2px wide); here you can adjust the width */
  height: 0;
  background: linear-gradient(to right, #dd8341, #dd8341 33.33%, #fff 33.33%, #fff 66.66%, #dd8341 66.66%); /* here you can adjust the spacing */
  margin-left: 10%;
  position: absolute; /* needs to be absolute */
  top: 0;
  animation: lineup 3s forwards;
}

.content:after {
  top: 100%;
  animation: linedown 3s forwards;
}

@keyframes lineup {100% {top: -200px; height: 200px}}
@keyframes linedown {100% {height: 200px}}

添加：

<div class="content"></div>

/* recommended */
* {box-sizing: border-box}
body {margin: 0}

.content {
  position: fixed;
  background-color: #dd8341;
  top: 40%;
  width: 100%;
  height: 20%;
  padding: 20px;
}

.content:before,
.content:after,
.linedown1,
.linedown2 {
  content: "";
  width: 2px;
  height: 0;
  background: #dd8341;
  left: 20%;
  position: absolute;
  top: 0;
  animation: lineup 3s forwards;
}

.linedown1, .linedown2 {top: 100%; animation: linedown 3s forwards}

.content:after, .linedown2 {left: 80%; animation-delay: 1s}

@keyframes lineup {100% {top: -200px; height: 200px}}
@keyframes linedown {100% {height: 200px}}

如何使用CSS动画上下的垂直线？

2 个答案: