单个div+css模拟终端命令行输入执行动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：单个div+css模拟终端命令行输入执行动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  min-height: 200px;
  height: 100vh;
  position: relative;
  background-color: #222;
  overflow: hidden;
}
div {
  position: absolute;
  left: 50%;
  top: 50%;
}
#rules {
  width: 16em;
  height: 9.6em;
  margin-left: -8em;
  margin-top: -4.8em;
  background: radial-gradient(circle, #555 50%, transparent 50.2%) 0.5em 0.4em/0.8em 0.8em, radial-gradient(circle, #555 50%, transparent 50.2%) 1.3em 0.4em/0.8em 0.8em, radial-gradient(circle, #555 50%, transparent 50.2%) 2.1em 0.4em/0.8em 0.8em, linear-gradient(#333, #333) 0 0/100% 1.5em;
  background-repeat: no-repeat;
  border-radius: 0.6em;
  box-shadow: 0 0 0 0.1em rgba(255,255,255,0.2), 0 1em 1.5em -0.6em rgba(0,0,0,0.7), 0 0.6em 0.5em -0.6em rgba(0,0,0,0.5), 0 0 0 40em #9370db;
}
#rules::before,
#rules::after {
  content: '';
  display: block;
  position: absolute;
  top: 1.8125em;
  -webkit-animation: 7s infinite linear;
          animation: 7s infinite linear;
  z-index: -1;
}
#rules::before {
  width: 100%;
  height: 500%;
  left: 0.6em;
  content: '$ the web rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules';
  font-family: 'Courier New', mono;
  color: #32cd32;
  white-space: pre-wrap;
  text-align: left;
  line-height: 1.25;
  -webkit-animation-name: rulesText;
          animation-name: rulesText;
}
#rules::after {
  width: 24.599999999999998em;
  height: 12.5em;
  left: -14.399999999999999em;
  background: linear-gradient(to top, #32cd32 0.06em, transparent 0.06em) right 7.8em top 0/0.6em 1.25em, linear-gradient(#222, #222) right top /8.4em 1.25em, linear-gradient(#222, #222) 0 2.5em /7.8em 100%, linear-gradient(#222, #222) 7.8em 1.25em/100% 100%;
  background-repeat: no-repeat;
  -webkit-animation-name: rulesPrinting;
          animation-name: rulesPrinting;
}
@-webkit-keyframes rulesPrinting {
  0%, 10% {
    transform: translate(0, 0);
  }
  10.01%, 12% {
    transform: translate(0.6em, 0);
  }
  12.01%, 14% {
    transform: translate(0.6em, 0);
  }
  14.01%, 16% {
    transform: translate(1.2em, 0);
  }
  16.01%, 18% {
    transform: translate(1.8em, 0);
  }
  18.01%, 20% {
    transform: translate(2.4em, 0);
  }
  20.01%, 22% {
    transform: translate(3em, 0);
  }
  22.01%, 24% {
    transform: translate(3.6em, 0);
  }
  24.01%, 26% {
    transform: translate(4.2em, 0);
  }
  26.01%, 28% {
    transform: translate(4.8em, 0);
  }
  28.01%, 30% {
    transform: translate(5.399999999999999em, 0);
  }
  30.01%, 32% {
    transform: translate(6em, 0);
  }
  32.01%, 34% {
    transform: translate(6.6em, 0);
  }
  34.01%, 36% {
    transform: translate(7.199999999999999em, 0);
  }
  36.01%, 40% {
    transform: translate(7.8em, 0);
  }
  40.01%, 45% {
    transform: translate(0, 1.25em);
  }
  45.01%, 47% {
    transform: translate(14.399999999999999em, 0);
  }
  47.01%, 49% {
    transform: translate(14.399999999999999em, 1.25em);
  }
  49.01%, 51% {
    transform: translate(14.399999999999999em, 2.5em);
  }
  51.01%, 53% {
    transform: translate(14.399999999999999em, 3.75em);
  }
  53.01%, 79% {
    transform: translate(14.399999999999999em, 5em);
  }
  79.01%, 81% {
    transform: translate(0, 6.25em);
  }
  81.01%, 83% {
    transform: translate(0, 5em);
  }
  83.01%, 85% {
    transform: translate(0, 3.75em);
  }
  85.01%, 87% {
    transform: translate(0, 2.5em);
  }
  87.01%, 89% {
    transform: translate(0, 1.25em);
  }
  89.01%, 100% {
    transform: translate(0, 0);
  }
}
@keyframes rulesPrinting {
  0%, 10% {
    transform: translate(0, 0);
  }
  10.01%, 12% {
    transform: trans.........完整代码请登录后点击上方下载按钮下载查看