CSS 关键帧效果

Question

我希望我的元素 fade in 然后 2 条线从圆圈出来，一条在左边，一条在右边。
但我无法得到的是：每次我尝试让线条出现时，它都会缩小整个东西，我想在中间固定圆圈然后让线条（容器）开始 "grow"。
已经将它设置为绝对但没有成功:\

代码运行：Codepen.io

Answer 1

您可以使用 pseudo selector :before and :after 来创建平滑的 CSS3 animation 而不是为每个元素添加不同的 class，

.container{
 width:200px;
 height:auto;
 text-align:center;
 position:relative;
 top:10px;
}
.container > span{
 display:block;
 position:relative;
}
.container:before{
 content:'';
 position:absolute;
 width:10px;
 height:10px;
 background:blue;
 z-index:9;
 top:-10px;
 border-radius:50%;
 animation:opt 2s ease forwards;
 opacity:0;
}
.container:after{
 content:'';
 position:absolute;
 width:10px;
 height:10px;
 background:blue;
 z-index:9;
 bottom:-12px;
 border-radius:50%;
 animation:opt 2s ease forwards;
 opacity:0;
}
@keyframes opt{
 from{
  opacity:0;
 }
 to{
  opacity:1;
 }
}
.container > span:before{
 content:'';
 position:absolute;
 width:0px;
 height:2px;
 background:#111;
 z-index:7;
 bottom:-10px;
 right:50%;
 transform:translate(0,-50%);
 transition:1s ease;
 animation:wdth 2s ease forwards 1s;
}
.container > span:after{
 content:'';
 position:absolute;
 width:0px;
 height:2px;
 background:#111;
 z-index:7;
 top:-5px;
 left:50%;
 transition:1s ease;
 animation:wdth 2s ease forwards 1s;
}
@keyframes wdth{
 from{
  width:0px;
 }
 to{
  width:50px;
 }
}

<div class="container">
 <span>Ghaleon Games</span>
</div>

CSS 关键帧效果

CSS KeyFrame effects

css

keyframe

css-animations