css3 线条从中间加长

CSS3提供了许多强大的特性，其中之一就是可以让线条从中间逐渐加长。这个功能可以让网页更加动态和吸引人，下面我们来看一下如何实现。

.line {
    position: relative;
    width: 200px;
    height: 3px;
    background-color: #000000;
    overflow: hidden;
}
.line:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #ffffff;
    transform: translateX(-50%);
    animation: grow 1s linear infinite;
}
@keyframes grow {
0% {
     width: 0;
 }
50% {
     width: 100%;
 }
100% {
     width: 0;
 }
}

首先，我们需要创建一个div元素，并且设置它的宽度、高度和背景颜色为黑色，使用overflow:hidden来隐藏超出div范围的内容（隐藏中间的白色线条）。然后，我们需要在这个div元素内部创建一个伪元素:before，并且将它定位在div元素中间。这个伪元素的宽度为0，高度和div元素相同，背景颜色为白色，使用transform:translateX(-50%)让它居中显示。

接下来，我们需要给伪元素:before添加一个动画效果。动画名称为grow，持续时间为1秒，动画速度为线性，重复次数为无限次。

@keyframes grow {
0% {
     width: 0;
 }
50% {
     width: 100%;
 }
100% {
     width: 0;
 }
}
    

我们定义了一个名为grow的关键帧动画。动画通过3个关键帧来实现线条从中间逐渐加长的效果。在0%的关键帧，线条的宽度为0，既没有显示出来。到50%的关键帧，线条的宽度变为100%，逐渐变长。到100%的关键帧，线条的宽度再次变为0，又回到了开始的状态。

最后，让我们来看看这个线条从中间逐渐加长的效果。你可以将上面的代码复制到你的网页中，并将class为line的div元素插入到你想要添加这个效果的位置。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！