响应式旋转单词CSS

Question

我正在努力使我的旋转单词响应并以页面为中心。这是来自GitHub的代码，仅适用于HTML和CSS。当浏览器为100％时，输出不在页面的中心位置，它只是向右偏移了一点。缩小浏览器时，跨度字不能正确排列。任何帮助是极大的赞赏！ -Chad

h1{
	color: #000;
	font-size: 44px;
	margin-top: 40px;
	text-align: center;
}
/*Sentence*/
.sentence{
     color: #222;
     font-size: 30px;
     text-align: left;
}
/*Pop Effect*/
.popEffect{
	display: inline;
	text-indent: 8px;
}
.popEffect span{
	animation: pop 12.5s linear infinite 0s;
	-ms-animation: pop 12.5s linear infinite 0s;
	-webkit-animation: pop 12.5s linear infinite 0s;
	color: #00abe9;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.popEffect span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.popEffect span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.popEffect span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.popEffect span:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}
/*Pop Effect Animation*/
@-moz-keyframes pop{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0;}
}
@-webkit-keyframes pop{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes pop{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

  <h1>Pop Effect looks very
    <div class="popEffect">
      <span>Handsome.</span>
      <span>Clean.</span>
      <span>Elegant.</span>
      <span>Magnificent.</span>
      <span>Adorable.</span>
    </div>
  </h1>

Answer 1

  

“当浏览器为100％时，输出不在页面的中心位置，它只是偏右了一点。”

因此，让我们首先了解实际导致问题的原因：

html中的span定位为“绝对”，定位为绝对的对象被视为从未存在过（其他对象无法与之交互）。因此，当您尝试使用text-align: center;将h1和<div class="popEffect">置于居中时，只有h1居中，然后<div class="popEffect">会尝试与已居中对齐h1

（如下图所示）

这是我解决这个问题的方法：

首先，在div中包含所有内容（h1，<div class="popEffect">）

  <div class="stuff">  <!-- The new element -->
    <h1>Pop Effect looks very

      <div class="popEffect">
        <span>Handsome.</span>
        <span>Clean.</span>
        <span>Elegant.</span>
        <span>Magnificent.</span>
        <span>Adorable.</span>
      </div>

    </h1>
  </div>  <!-- The new element -->

然后将以下css添加到现有的

.stuff{

  /*the width of the "<h1>" + "<div class="popEffect">"*/
  width: 600px 

  /*the css below will center almost any html object*/
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

}
h1{
    white-space: nowrap;
}

我们正在做的是将所有东西包装在一个div中并使该div居中。 并且因为弹出文本的宽度总是在变化，你需要自动计算div所需的宽度，使用下面的jQuery代码

它获取最宽的Poping文本的宽度，然后将整个事情调整为。

$(document).ready(function(){var spans = $(".popEffect span"); //get all the "span" inside "popEffect"
var spansWidth = [];

spans.each(function(){
    spansWidth.splice(0,0,$(this).width());
});
//
  var largest = Math.max.apply(Math, spansWidth);//get the largest number
  $(".stuff").width($("h1").width() + largest);
});

如果你不理解我的解释（因为我不好解释：p），这里有一个小提琴：https://jsfiddle.net/Bintang/6htwazzo/