响应旋转词 CSS

Question

我正在尝试使我的轮换词具有响应性并在页面上居中。这是来自 GitHub 的代码，仅适用于 HTML 和 CSS。当浏览器为 100% 时，输出不在页面的中心，它稍微偏右一点。当浏览器变窄时，跨度词不会正确排列。任何帮助是极大的赞赏！ -乍得

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

"When the browser is 100% the output is not centered on the page, it's off tho the right just a bit."

所以让我们首先了解导致您的问题的真正原因：

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

（如下图）

这是我对这个问题的解决方案：

首先，把所有的东西(h1,<div class="popEffect">)装进一个div

  <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。并且因为 Poping 文本的宽度总是在变化，所以您需要自动计算 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);
});

响应旋转词 CSS

Responsive Rotate Words CSS

html

css

rotation

animate.css

responsiveness

如果你不明白我的解释（因为我不善于解释 :p ），这里是 fiddle：https://jsfiddle.net/Bintang/6htwazzo/