css布局实现一个输入网址打印照片的打印机动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现一个输入网址打印照片的打印机动画效果代码，可自己实现后端生成网页预览照片接口

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


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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side:nth-of-type(1) {
  height: calc(var(--thickness) * 1vmin);
  width: 100%;
  position: absolute;
  top: 0;
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  width: 100%;
  height: calc(var(--thickness) * 1vmin);
  position: absolute;
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
  position: absolute;
  top: 0;
  left: 0;
}
.cuboid__side:nth-of-type(6) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}
*,
*:after,
*:before {
  box-sizing: border-box;
  transform-style: preserve-3d;
  touch-action: none;
}
:root {
  --base-size: 12;
  --depth: calc(var(--base-size) * 2.25);
  --height: calc(var(--base-size) * 1vmin);
  --width: calc(var(--base-size) * 1.4vmin);
  --base-hue: 206;
  --accent-hue: 35;
  --bg: hsl(276 20% 74%);
  --shoot-speed: 1.5;
  --load-speed: 2;
  --print-speed: 1;
  --p-1: hsl(var(--base-hue), 30%, 90%);
  --p-2: hsl(var(--base-hue), 30%, 86%);
  --p-3: hsl(var(--base-hue), 30%, 82%);
  --p-4: hsl(var(--base-hue), 30%, 78%);
  --p-5: hsl(var(--base-hue), 30%, 72%);
  --p-6: hsl(var(--base-hue), 30%, 68%);
  --p-7: hsl(var(--base-hue), 30%, 64%);
  --p-8: hsl(var(--base-hue), 30%, 20%);
  --t-1: #666;
  --t-2: #5c5c5c;
  --t-3: #525252;
  --t-4: #474747;
  --t-5: #3d3d3d;
  --g-1: hsl(var(--base-hue), 40%, 94%);
  --g-2: hsl(var(--base-hue), 40%, 90%);
  --g-3: hsl(var(--base-hue), 40%, 86%);
  --g-4: hsl(var(--base-hue), 40%, 80%);
  --g-5: hsl(var(--base-hue), 40%, 96%);
  --a-1: hsl(var(--accent-hue), 10%, 65%);
  --a-2: hsl(var(--accent-hue), 10%, 60%);
  --a-3: hsl(var(--accent-hue), 10%, 55%);
  --a-4: hsl(var(--accent-hue), 10%, 50%);
  --a-5: hsl(var(--accent-hue), 10%, 45%);
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  overflow: hidden;
  touch-action: none;
}
.light {
  height: calc(var(--height) * 0.1);
  width: calc(var(--height) * 0.1);
  position: absolute;
  left: 50%;
  top: 20%;
  border-radius: 0%;
  border: calc(var(--height) * 0.01) solid var(--p-8);
}
.standby-light {
  background: #1466b8;
  transform: translate(-50%, 0) translate(100%, 0);
}
.progress-light {
  transform: translate(-50%, 0) translate(-100%, 0);
  background: hsla(var(--progress-hue, 103), 80%, 50%);
}
.customer-form {
  position: fixed;
  top: calc(var(--height) + 50%);
  left: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate3d(-50%, 0%, 400vmin);
}
.customer-form > * + * {
  margin-top: 0.75rem;
}
.customer-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.customer-form [type="url"] {
  padding: 1rem 2rem;
  font-size: 1.25rem;
  border: 4px solid #914db3;
  border-radius: 1rem;
  text-align: center;
  font-family: 'Fredoka One', cursive;
  outline: transparent;
}
.customer-form [type="submit"] {
  font-family: 'Fredoka One', cursive;
  outline: transparent;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  color: #fff;
  width: 180px;
  border-radius: 1rem;
  border: 4px solid #914db3;
  background: #a219e6;
  transition: ba.........完整代码请登录后点击上方下载按钮下载查看