时间戳

首页 > 解决方案 > 如何使此文本动画居中？

html - 如何使此文本动画居中？

问题描述

文本动画和一般编码的超级新手 - 所以提前道歉！我目前正在尝试将整个文本动画集中在网站的标题部分。我一直在玩css，但我很难让它看起来居中并保持水平并且在移动设备上看起来不错。任何建议或信息都会很棒:)非常感谢！

这里是！ https://codepen.io/kamwam/pen/PoYzNqw

.rw-wrapper {
  width: 80%;
  position: absolute;
  text-align: center;
  margin: 110px auto 0 auto;
  font-family: 'Playfair Display';
  font-weight: 600;
  padding: 10px;
}

.after {
  margin-left: 134px;
}

.rw-sentence {
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.rw-sentence span {
  color: #333;
  font-size: 200%;
  font-weight: 400;
}

.rw-words {
  display: inline;
  text-indent: 10px;
}

.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #0076bb;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}

.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(6) {
  -webkit-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
  color: #0076bb;
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -ms-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -ms-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {
  .rw-sentence {
    font-size: 18px;
  }
}

@media screen and (max-width: 320px) {
  .rw-sentence {
    font-size: 9px;
  }
}
<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'>

<section class="rw-wrapper">
  <div class="rw-sentence">
    <span>Ties made for your</span>

    <div class="rw-words rw-words-1">
      <span>outdoor</span>
      <span>modern</span>
      <span>vintage</span>
      <span>garden</span>
      <span>nautical</span>
      <span>modern</span>
    </div>
    <span class="after"> wedding</span>

  </div>
</section>

标签： htmlcsscss-animations

解决方案

我在这里叉了你的笔。

我删除了大部分边距和填充，这就是我所拥有的（我评论了我在代码中所做的）：

.rw-sentence {
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);

  /* max-content make the width fit the content "at is largest" (without wrap) */
  /* this allow margin: 0 auto; to center it without white space 
     (It fit the box to the text and center the box) */
  width: max-content;
  margin: 0 auto;
  /* This is also necessary, otherwise you'd have to compensate for the difference
     in height with the container one way or another */
  height: 100%;
}

.rw-sentence span {
  color: #333;
  font-size: 200%;
  /* I fiddled to find the right line height to fit the height of the container */
  /* not sure that's "best practice" but it work :) */
  line-height: 140%;
  font-weight: 400;
 }

编辑

稍后阅读有关响应问题的信息。

html {
  /* define a root font-size */
  /* using unit like vw (a % of the width of the viewport 
     or vmax (a % of the largest between the height and width of the viewport
     can make your design more fluid as it will adjust with the device viewport */

  font-size: 16px;
}

/* I set this container font-size to "1 time the root font-size" 
   The font size in your span (200%) is 200% of this font-size here 
   If you use 'rem' for other length (like width, height ..) it will still
   be representing the root font-size (here x time 16px) */

.rw-sentence {
  font-size: 1rem;

/* This is the values I chose for the media queries but feel free to 
   play around with those values, trying 'vw', 'vmax', using rem ...*/

@media screen and (max-width: 860px) {
  html {
    font-size: 10px;
  }
}

@media screen and (max-width: 400px) {
  html {
    font-size: 8px;
  }
}

推荐阅读