代码之家  ›  专栏  ›  技术社区  ›  Gurpinder Singh

我想构建改变的闪烁文字效果?在css中。

  •  0
  • Gurpinder Singh  · 技术社区  · 7 年前

    我正在寻找一种类型效果,可以定期更改单词并键入不同的单词。例如 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; }
    }
    
    2 回复  |  直到 7 年前
        1
  •  1
  •   CodeZombie    7 年前

    希望这对你有用。

    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>
        2
  •  1
  •   Learning    7 年前

    你看过字体了吗。js这将为您服务 https://mattboldt.com/demos/typed-js/

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

    示例工作 https://codepen.io/anon/pen/KQKPRe