Question

所以我一直在尝试制作功能＆＃39; steps（）＆＃39;在我的网页上为动画工作，但我一直收到错误

＆＃34;意外的角色＆＃34;步骤＆＃34;发现＆＃34;

我搜索了Google，但没有网页讨论这个问题。

我关注的网站是this

＆＃13;

.container.main.tagline {
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

＆＃13;

<body>
  <div class="main">
    <img src="wall1.jpg" alt="main image">
    <div class="tagline">See beyond the big picture.</div>
  </div>
</body>

＆＃13;

Answer 1

你在CSS中给出了错误的选择器。

对于HTML中名为.main .tagline的父级内的文字，div class="tagline"应该只有main

.main .tagline {
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<body>
  <div class="main">
    <img src="wall1.jpg" alt="main image">
    <div class="tagline">See beyond the big picture.</div>
  </div>
</body>

CSS意外的角色＆＃39;步骤＆＃39;

1 个答案: