Question

我的第一个问题。首先，英语不是我的母语，所以如果我犯了一些错误，请耐心等待。

我发现了一个我喜欢的文字动画，我将其添加到我的网站，这里是原始版本：http://codepen.io/bennettfeely/pen/lgybC

＆＃13;

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Finger+Paint);

body {
  background: black;
  overflow: hidden;
  font: 5vw/100vh "Finger Paint";
  text-align: center;
  color: transparent;
  backface-visibility: hidden;
}

span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s 3s both;
}

span:nth-child(even){
  animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke; }
  to {
    transform:
      translate3d(18rem,-8rem,0)
      rotate(-40deg) 
      skewX(-70deg)
      scale(2);
     text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(3 + ($item/10))}s; 
  }
}

＆＃13;

<span>C</span><span>S</span><span>S</span><span>&nbsp;</span><span>S</span><span>m</span><span>o</span><span>k</span><span>y</span><span>&nbsp;</span><span>T</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>E</span><span>f</span><span>f</span><span>e</span><span>c</span><span>t</span>

＆＃13;

现在，我希望在第一个单词/短语消失后，使用反转效果（在烟雾般的云中出现文本）后不久会出现另一个单词/短语。

我尝试编辑CSS以实现上述描述，但没有成功。

这是我编辑的版本：

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Finger+Paint);
body {
  background: black;
  overflow: hidden;
  font: 5vw/100vh "Finger Paint";
  text-align: center;
  color: transparent;;
  backface-visibility: hidden;
}

.a span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s 3s both;
}

.a span:nth-child(even) {
  animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
.a span:nth-of-type(1) {
  animation-delay: 3.1s;
}

.a span:nth-of-type(2) {
  animation-delay: 3.2s;
}

.a span:nth-of-type(3) {
  animation-delay: 3.3s;
}

.a span:nth-of-type(4) {
  animation-delay: 3.4s;
}

.a span:nth-of-type(5) {
  animation-delay: 3.5s;
}

.a span:nth-of-type(6) {
  animation-delay: 3.6s;
}

.b span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s 3s both reverse;
}

.b span:nth-child(even) {
  animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
.b span:nth-of-type(1) {
  animation-delay: 3.1s;
}

.b span:nth-of-type(2) {
  animation-delay: 3.2s;
}

.b span:nth-of-type(3) {
  animation-delay: 3.3s;
}

.b span:nth-of-type(4) {
  animation-delay: 3.4s;
}

.b span:nth-of-type(5) {
  animation-delay: 3.5s;
}

.b span:nth-of-type(6) {
  animation-delay: 3.6s;
}

＆＃13;

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Smoky Text</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="style.css">

  
</head>

<body>
  <div class="a"><span>U</span><span>m</span><span>b</span><span>r</span><span>i</span><span>a</span></div>
  <div class="b"><span>V</span><span>e</span><span>n</span><span>e</span><span>t</span><span>o</span></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>

＆＃13;

正如您所看到的，我编辑的CSS中出现了问题，实际上如果您禁用＆＃34; overflow：hidden;＆＃34;在body元素中，您会看到第二个单词出现在浏览器的底部，而不是第一个单词的相同位置。

请注意，我想在我网站的标题中添加动画文字，这样我就可以轻松找到轻松定位文字的方法。

有人愿意帮助我吗？

提前致谢！

在CSS3

0 个答案: