标题动画

Question

我目前正在尝试根据其他网站编写一个小动画。我基本上试图复制效果，但它似乎没有正确的工作。

CodePen：http://codepen.io/wagnva/pen/xwemvL
我尝试从以下网站复制的网站：http://html5up.net/spectral

澄清一下：我希望这两条线从中间到外面，只有文字很长。

这里也是代码：

HTML：

<header>
    <h1>Welcome</h1>
</header>

CSS：

header h1{
  padding-top: 10px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 6rem;
  color: black;
  opacity: 0;
  transition: opacity 1.5s ease 0s;
  position: absolute;
  display: inline-block;
}

header h1:before,
header h1:after{
  content: "";
  display: block;
  height: 2px;
  background: black;
  box-sizing: border-box;
  width: 1%;
  transition: width 5s ease 0s;
  position: relative;
}

.welcome-transition,
.welcome-transition:before,
.welcome-transition:after{
  opacity: 1;
  width: 100%;
} 

JS：

$(document).ready(function(){

  $(window).on("load", function(){
      $("header h1").addClass("welcome-transition");
      console.log("Stuff");
  });

});

Answer 1

1. 您已将width: 100%;应用于.welcome-transition，这会导致h1扩展到其父级的宽度，而不是其自己的文字宽度。

2. 要从中间移动到外部，您可以先将:before和:after移至中心，然后将position和width同时应用于此。< / p>

我已根据更改的评论更改您的代码，检查它是否符合您的要求。

＆＃13;
＆＃13;
$(document).ready(function(){
  $(window).on("load", function(){
      $("header h1").addClass("welcome-transition");
      console.log("Stuff");
  });
});
＆＃13;
/* I just want it to be center */
header {
  text-align: center;
}

header h1{
  padding-top: 10px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 6rem;
  color: black;
  opacity: 0;
  transition: opacity 1.5s ease 0s;
  
  /* I just want it to be center */
  position: relative;
  display: inline-block;
}

header h1:before,
header h1:after{
  content: "";
  display: block;
  height: 2px;
  background: black;
  box-sizing: border-box;
  width: 1%;
  
  /* As we also need position effect, add left's setting too. */
  transition: width 5s ease 0s, left 5s ease 0s;
  position: relative;
  
  /* Make the position starts at middle */
  left: 50%;
}

/* To Make the h1 fix the text's width, don't specify it's width to 100%, or it become the body's width */
.welcome-transition{
  opacity: 1;
}

.welcome-transition:before,
.welcome-transition:after{
  opacity: 1;
  width: 100%;
  left: 0;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <h1>Welcome</h1>
</header>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你的代码几乎是好的。您希望您的线条仅与文本一样宽。目前，您的h1已width:100%。

所以你可以改变这个部分：

.welcome-transition,
.welcome-transition:before,
.welcome-transition:after{
  opacity: 1;
  width: 100%;
} 

的

.welcome-transition,
.welcome-transition:before,
.welcome-transition:after{
  opacity: 1;
  width: 100%;
} 
.welcome-transition{
  width: auto;
} 

如果您希望标题居中，可以添加以下内容：

header {
  text-align: center;
}

希望这有帮助！

Answer 3

没有并发症，没有黑客 - h1上的这些简单的四条规则将解决它（这也是一种正确的方法）：

display: block;       /* to make it easier to center */
width: 550px;         /* this goes on :after element as well */
margin: 64px auto;    /* centering */
position: static;     /* necessary for the above to work, 
                         but simply removing absolute positioning is fine, too */

http://codepen.io/anon/pen/EVJrwo