使用CSS从页面加载中心向外增长线？答案

【问题标题】：Grow line from center out on page load with CSS?使用CSS从页面加载中心向外增长线？
【发布时间】：2016-09-11 19:22:21
【问题描述】：

我正在尝试通过此答案实现效果，但没有文字：Expand bottom border on hover

知道这可以通过从中心增长整个 div 来实现，就像这里一样：http://jsfiddle.net/wNXLY/ 但不知道如何用线条创建这种效果（即保持高度不变）

我在这里创建了我的线路：

.line {
    background: white;
    width: 300px;
    top: 10%;
    height: 3.2px;
    margin:auto;
    position: relative;
}

并且需要在页面加载时从中心开始增长。我该怎么做？

【问题讨论】：

“但没有文字” “没有文字”是什么意思？
如果我试图模仿上面的效果，我会使用 text-decoration 来创建线条，但是我只有一个 div（没有文本），所以我不能使用 text-decoration。我需要了解如何从中心仅在宽度上增加 div

标签： javascript html css

【解决方案1】：

我已经利用显示网格和 SCSS 来配置真实的边框动画

.top-border {
  grid-area: tb;
  // background: green;
  border-bottom: $border-config;
  width: 0%;
  animation: horizontal-border-animation $animation-duration / 2 forwards;
  animation-delay: $animation-delay;
}

.bottom-border {
  grid-area: bb;
  //to prevent being visible since it is going to be delayed
  width: 0%;
  // background: yellow;
  border-top: $border-config;
  animation: horizontal-border-animation $animation-duration / 2 forwards;
  // because both right and bottom will start animating after top and left + the intitial delay
  animation-delay: $animation-duration / 2 + $animation-delay;
}



  @keyframes expand-border-width {
  from {
    width:0%;
  }
  to {
    width:100%;
  }
}

检查我的样本以获得明确的说明

https://codepen.io/ino0r/pen/eYEgvrZ

【讨论】：

【解决方案2】：

   @keyframes line_animation {
from {
	width: 0%;
}
to {
	width:100%;
}
}
.line {
border-bottom: solid 3px #019fb6;
border-top-width: 0px;
animation-name: line_animation;
animation-duration: 4s;
animation-timing-function: linear; 
}

Like this

<hr class="line" />

【讨论】：

【解决方案3】：

您可以使用css animation 将animation-fill-mode 设置为forwards，将@keyframes width 从0% 设置为n%，将left 从50%31 设置为@

body {
  width:100%;
}

div {
  display:block;
  position:absolute;
  top:45%;
  left:50%;
  border-bottom:4px solid red;
  width:0%;
  text-align:center;
  animation: line 2s linear forwards;
}

@keyframes line {
  from {
    left:50%;
    width:0%;
  }
  to {
    left:5%;
    width:90%;
  }
}

&lt;div&gt;&lt;/div&gt;

【讨论】：