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

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

代码语言：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),.........完整代码请登录后点击上方下载按钮下载查看