Question

我正在努力完成此答案的效果，但没有文字：Expand bottom border on hover

并且知道这可以通过从中心增长整个div来完成，就像在这里：http://jsfiddle.net/wNXLY/但不知道如何用线创建这种效果（即保持高度静态）

我在这里创建了我的专栏：

DELETE FROM table_name WHERE primary_key=your_get_value;

并且需要在页面加载时从中心增长。我怎么能这样做？

Answer 1

您可以css animation将animation-fill-mode设置为forwards，将@keyframes width设置为0%至{{ 1}}，n%从left到50%

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

Answer 2

喜欢这个

<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>

使用CSS从页面加载中心扩展线？

2 个答案: