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

代码语言：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;
  font-size: 2.5vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58vmin;
  height: 60vmin;
  box-sizing: border-box;
  background-image:
    /* paper */
    repeating-linear-gradient(var(--paper) 0 10%, var(--primary) 11%),
    /* roller knob */
    repeating-linear-gradient(gray 0 2%, var(--base) 0 4%),
    /* carriage */
    linear-gradient(silver, silver),
    linear-gradient(transparent 35%, gray 0 48%, transparent 0),
    radial-gradient(silver 50%, transparent 0);
  background-size: 
    /* paper */
    70% 50%,
    10% 9vmin,
    3% 20vmin,
    100% 100%,
    6% 10vmin;
  background-position:
    /* paper */
    center top,
    right 20.35vmin,
    left 9vmin,
    left top,
    left 7.5vmin;
  background-repeat: no-repeat;
}

body::before {
  animation: moveTypewriter 2s steps(6) 1;
  aanimation-fill-mode: forwards;
  content: "";
  width: 50vmin;
  height: 36vmin;
  top: 24vmin;
  left: 50%;
  transform: translateX(-50%);
  background: var(--base);
  border-radius: 2vmin;
  position: absolute;
  background-image:
    /* buttons row 1 */
    radial-gradient(ellipse 1.25vmin 1.25vmin at  9.5vmin 20vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 13.0vmin 20vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 16.5vmin 20vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 20.0vmin 20vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 23.5vmin 20vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 27.0vmin 20vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 30.5vmin 20vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 34.0vmin 20vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 37.5vmin 20vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 41.0vmin 20vmin, var(--button) 95%, transparent 0),
    /* buttons row 2 */
    radial-gradient(ellipse 1.25vmin 1.25vmin at  7.75vmin 23.25vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 11.25vmin 23.25vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 14.75vmin 23.25vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 18.25vmin 23.25vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 21.75vmin 23.25vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 25.25vmin 23.25vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 28.75vmin 23.25vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 32.25vmin 23.25vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 35.75vmin 23.25vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 39.25vmin 23.25vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 42.75vmin 23.25vmin, var(--button) 95%, transparent 0),
    /* buttons row 3 */
    radial-gradient(ellipse 1.25vmin 1.25vmin at  7.75vmin 26.5vmin, var(--button) 95%, transparent 0),
    radial-gradient(ellipse 1.25vmin 1.25vmin at 11.25vmin 26.5vmin, var(--b.........完整代码请登录后点击上方下载按钮下载查看