letterloading实现打字输出动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：letterloading实现打字输出动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body,
p,
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 105%;
}

#container {
  width: 50vw;
  margin: 1rem auto;
}

@media screen and (max-width: 600px){
    #container{
        width: 90vw;
    }
}

#container h1 {
  text-align: center;
}
section {
  padding: 12px 0;
  font-weight: 400;
}
.paleteContainer h2 {
  font-size: 1.2rem;
  font-weight: 400;
}

.loadingPalete{
    background-color: rgba(129, 224, 224,0.3);
    width: 99%;
    min-height: 2rem;
    border-radius: 1.2rem;
    padding: 0.3em 2rem;
    font-weight: bolder;
}

.loadingPalete_spec{
  background-color: rgba(129, 224, 224,0.3);
  width: 100%;
  min-height: 6rem;
  border-radius: 1.2rem;
  padding: 0.3em 2rem;
  font-weight: bolder;
}

footer>p{
  font-size: 0.8em;
  border-top: 1px solid rgba(107, 102, 102, 0.3);
  padding-top: 2rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/letterloading.js"></script>
</head>

<body>
    <div id="container">
        <header>
            <h1>LetterLoading</h1>
        </header>

        <section class="paleteContainer">
            <h2>Default Letter Loading Simulation (loop is set to true by default )</h2>
            <div class="loadingPalete"><span id="main"><span class="data-hide">-</span><span class="data-hide">-</span><span class="data-hide">-</span><span class="data-hide">-</span>l<span class="data-hide">-</span>v<span class="data-hide">-</span><span class="data-hide">-</span>y
                <span class="data-hide">-</span>
                </span>
            </div>
            <p>
            </p>
            <pre>            var letter = new LetterLoading('#main', {
              loadspeed: 5
            });
          </pre>
            <p></p>
        </section>

        <section class="paleteContainer">
            <h2> Twick LetterLoading to behave like typed js with even more swag, set cursorType</h2>
            <div class="loadingPalete"><span id="main3">You're <span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span>
                <span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span>
                <span
                    class="data-hide"></span>
                    <span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span></span><span class="block-cursor"><span class="block"></span></span>
            </div>
            <p>
            </p>
            <pre>            var letter3 = new LetterLoading('#main3', {
              strings: [
                "You're lovely... yes you are",
                "This is an example string",
                "tell me about what more animation you love",
                "Lastly, Hey, if you're Bukunmi, I love you"
              ],
              loadspeed: 2,
              cursor: true,
              simulate: "typed",
              cursorType: "block"
            });
          </pre>
            <p></p>
        </section>

        <section class="paleteContainer">
            <h2> Letterloading cursorType can be set to <b>line, block or underscore</b>. see line example</h2>
            <div class="loadingPalete"><span id="main6">You're <span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span>
                <span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span>
                <span
                    class="data-hide"></span>
                    <span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span><span class="data-hide"></span></span><span class="line-cursor">|</span></div>
            <p>
            </p>
            <pre>            var letter6 = new LetterLoading('#main6', {
              strings: [
                "You're lovely... yes you are",
                "This is an example string",
                "tell me about what more animation you love",
                "Lastly, Hey, if you're Bukunmi, I love you"
              ],
              loadspeed: 2,
              cursor: true,
              simulate: "typed",
              // cursorType is set to line
              cursorType: "line"
            });
          </pre>
            <p></p>
        </section>

        <section class="paleteContainer">
            <h2> Letter Loading Loop set to false</h2>
            <div class="loadingPalete"><span id="main2">Yo<span class="data-hide">-</span><span class="data-hide">-</span><span class="data-hide">-</span><span class="data-hide">-</span><span class="data-hide">-</span><span class="data-hide">-</span><span class="data-hide">-</span>
                <span class.........完整代码请登录后点击上方下载按钮下载查看