代码之家 › 专栏 › 技术社区 › ScalaBoy

如何使用CSS设置垂直线上下生长的动画?

css-animations css3 css html

1

ScalaBoy · 技术社区 · 6 年前

这是我现在的剧本:

.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>

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

2 回复 | 直到 6 年前

1

2

VXp Kadir BuÅ¡atliÄ 6 年前

你不需要额外的钱就可以做到元素 ,使用 :before 和 :after 伪元素 长大成人,长大成人 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}}

<div class="content">
  <span class="linedown1"></span>
  <span class="linedown2"></span>
</div>

2

Temani Afif 6 年前

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

.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%;
  }
}