纯css无div布局实现打字机打字效果代码-html代码-BFW代码库

纯css无div布局实现打字机打字效果代码

代码语言：html

代码描述：纯css无div布局实现打字机打字效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');

html {
  background: #fed;
}

@keyframes movePaper {
  0% { transform: translate(-50%, -50%); }
  100% { transform: translate(calc(-50% - 6ch), -50%); }
}

@keyframes moveTypewriter {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(calc(-50% + 6ch)); }
}

@keyframes typing {
  to { width: 7ch; }
}

@keyframes typingHead {
  0%, 2% { background-position: 0ch 0; }
  8.333% { background-position: 0ch 6vmin }
  
  16.666% { background-position: 1ch 0 }
  25% { background-position: 1ch 6vmin }
  
  33.333% { background-position: 2ch 0 }
  41.666% { background-position: 2ch 6vmin }
  
  50% { background-position: 3ch 0 }
  58.333% { background-position: 3ch 6vmin }
  
  66.666% { background-position: 4ch 0 }
  75% { background-position: 4ch 6vmin }
  
  83.333% { background-position: 5ch 0 }
  /* ooops, bad timing! */
  100% { background-position: 5ch 6vmin; }
}

@media (prefers-reduced-motion) {
  * { animation: none !important; }
}

body {
  --hue: 0;
  --saturation: 75%;
  --lightness: 65%;
  --primary: hsl(var(--hue), var(--saturation), var(--lightness));
  --primary-light: hsl(var(--hue), var(--saturation), calc(var(--lightness) + 7%));
  --primary-dark: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 7%));
  --base: #333;
  --button: #eee;
  --paper: #fff;
  animation: movePaper 2s steps(6) 1;
  aanimation-fill-mode: forwards;
  padding-top: 20vmin;
  padding-left: 28.5vmin;
  font-family: syne mono, courier, monospace, monospace;
.........完整代码请登录后点击上方下载按钮下载查看