问我想建立闪烁的文字效果，会改变吗？在css中。
EN

Stack Overflow用户

提问于 2018-01-29 06:09:09

回答 2查看 342关注 0票数 0

我希望做一个文字效果，改变单词，并定期键入不同的单词。http://mattfarley.ca/就是一个例子。这正是我想要创建的。正如您所看到的，类型效果会改变单词并键入新单词。我该怎么做呢。这就是我到目前为止所知道的。然而，我不知道如何在完成后让单词发生变化。

.intro-text h1 {
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(30, end),
blink-caret .5s step-end 5;

}

/* 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; }
}

html

visual-web-developer-2010

web-developer-toolbar

jquery

css

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-01-29 06:16:39

希望这对你有用。

document.addEventListener('DOMContentLoaded',function(event){
  // array with texts to type in typewriter
  var dataText = [ "Amsterdam.", "Newyork", "Bengaluru", "sydney"];
  
  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
     document.querySelector("h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 700);
    }
  }
  // start a typewriter animation for a text in the dataText array
   function StartTextAnimation(i) {
     if (typeof dataText[i] == 'undefined'){
        setTimeout(function() {
          StartTextAnimation(0);
        }, 20000);
     }
     // check if dataText[i] exists
    if (i < dataText[i].length) {
      // text exists! start typewriter animation
     typeWriter(dataText[i], 0, function(){
       // after callback (and whole text has been animated), start next text
       StartTextAnimation(i + 1);
     });
    }
  }
  // start the text animation
  StartTextAnimation(0);
});

body {
  background-color: #ef3ef4;
  height: 100%;
  font-family: 'tradegothiclt-bold', sans-serif;
}

h1 {
  font-size: 5em;
  color: white;
  text-transform: uppercase;
}

span {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <h1>Hallo, Wij zijn Occhio!</h1>

票数 1

Stack Overflow用户

发布于 2018-01-29 06:35:08

你有没有看过type.js这将会满足你的目的https://mattboldt.com/demos/typed-js/

$(function(){

    $(".box").typed({
        strings: ["Amsterdam", "Newyork", "Bengaluru", "sydney", "Try it out!"],
        typeSpeed: 30,
      loop:true,
  callback: function(){

  }
    });

});