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

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

代码语言：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>

       .........完整代码请登录后点击上方下载按钮下载查看