使用CSS在頁面加載時從中心向外擴展線條？

我想從這個答案，但沒有文字達到的效果：Expand bottom border on hover 使用CSS在頁面加載時從中心向外擴展線條？

而且知道這可以通過在中心，在這裏成長的整個DIV來實現：http://jsfiddle.net/wNXLY/但不知道如何創建這種效果與線（即保持高度靜態）

我創建了我行的位置：

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

而且需要有行從頁面加載中心生長。我怎樣才能做到這一點？

來源

2016-05-16 skyguy

_「但沒有文字」_你是什麼意思的「沒有文字」？ – guest271314

如果我試圖模仿上面的效果，我會使用文字修飾來創建線條，但是我只有一個div（沒有文字），所以我不能使用文字修飾。我需要了解如何只從中心寬度增長一個div – skyguy

像這樣

<html> 
    <head> 
     <style> 
      @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; 
      } 
     </style> 
    </head> 
    <body> 
     <hr class="line" /> 
    </body> 
</html>

來源

2016-05-16 04:19:36 v7d8dpo4

您可以使用cssanimation與animation-fill-mode設置爲forwards，從50%從0%到n%，left設置@keyframeswidth到5%

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

<div></div>

來源

2016-05-16 04:26:55 guest271314

使用CSS在頁面加載時從中心向外擴展線條？

回答

相關問題