Question

标记

<div class="lline"></div>
<div class="projekt"><h1>SERVICES</h1></div>
<div class="rline"></div>

CSS

@keyframes anima {
    from {width: 0%; }
    to { width: 40%; }
}

.lline { 
    margin-top: 20px; 
    width: 40%; 
    background-color: #333; 
    animation-name: anima; 
    animation-duration:1s; 
    height: 2px; 
    float: left; }

.projekt { 
    text-align: center; 
    width: 14%; 
    margin: 0 auto; }

.rline { 
    margin-top: -38px;
    width: 40%; 
    background-color: #333; 
    animation-name: anima; 
    animation-duration:1s; 
    height: 2px;  
    float: right; }

我需要将文本SERVICES中的两条线设置为边框。

我尝试使用animation-direction属性设置它，但它不起作用。这些行必须是响应式的，所以我必须使用一些媒体查询，但如果你知道更好的方法，我会很高兴。谢谢

Answer 1

您可以使用伪元素和display: flex使用较少的标记来完成此操作，如下例所示：http://codepen.io/fcalderan/pen/aObYLK

标记

<h1 class="animateheading">SERVICES</h1>

的CSS

.animateheading {
   width: 100%;
   text-align: center;
   overflow: hidden;
   display: flex;
   align-items: center;
}

/* lines */
.animateheading:before,
.animateheading:after {
   content: "";
   flex-grow: 1;
   height: 1px;
   min-width: 100px;
   border-top: 1px #333 solid;
}

/* animation toward left */
.animateheading:before { 
   margin-right: .3em; 
   -webkit-animation: lineleft 3s linear 1s forwards; 
   -moz-animation: lineleft 3s linear 1s forwards; 
   animation: lineleft 3s linear 1s forwards; 
}

/* animation toward right */
.animateheading:after  { 
   margin-left: .3em;
   -webkit-animation: lineright 3s linear 1s forwards; 
   -moz-animation: lineright 3s linear 1s forwards; 
   animation: lineright 3s linear 1s forwards; 
} 


/* keyframes for left animation */ 
@-webkit-keyframes lineleft {
   from { -webkit-transform: translate(0, 0); }
   to { -webkit-transform: translate(-100%, 0); }
}

@-moz-keyframes lineleft {
   from { -moz-transform: translate(0, 0); }
   to { -moz-transform: translate(-100%, 0); }
}

@keyframes lineleft {
   from { transform: translate(0, 0); }
   to { transform: translate(-100%, 0); }
}

/* keyframes for right animation */ 
@-webkit-keyframes lineright {
   from { -webkit-transform: translate(0, 0); }
   to { -webkit-transform: translate(100%, 0); }
}

@-moz-keyframes lineright {
   from { -moz-transform: translate(0, 0); }
   to { -moz-transform: translate(100%, 0); }
}

@keyframes lineright {
   from { transform: translate(0, 0); }
   to { transform: translate(100%, 0); }
}

关于此实现的一些注释

Flexbox位置可能需要多种不同的语法，因为它在浏览器中实现：请参阅http://caniuse.com/#feat=flexbox;因为它仅用于造型目的而应用于伪元素，缺乏支持可被视为优雅退化;
此代码适用于任何长度和每viewport个大小的文本，因为它使用百分比值为transform属性设置动画。无论文本占用多少行，行都将始终垂直居中;
为keyframes;
animation-fill-mode属性设置为向前，因此将保留最后一个动画帧（并且线条不会返回）。
如果您需要始终看到两行，即使是非常长的文本，也可以像我在示例中那样在假元素上设置min-width，否则您可以安全地删除它。

通过CSS3动画在相反方向移动两条线

1 个答案: