纯css绘制一个相机-html代码-BFW代码库

纯css绘制一个相机

代码语言：html

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
/* fossheim.io */
/* Tutorial: https://fossheim.io/writing/posts/css-polaroid-camera/ */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: lightblue;
  background-image: radial-gradient(#9CDCE0, #9CD4E0);
}

.camera {
  display: block;
  width: 570px;
  height: 470px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  margin-top: calc(50vh - 235px);
  position: relative;
}

.camera .bottom {
  display: block;
  width: 100%;
  height: 165px;
  position: absolute;
  bottom: 0;
  border-radius: 11px 11px 30px 30px;
  background-image: radial-gradient(#E1DFE2 60%, transparent 60%),
    radial-gradient(#E1DFE2 60%, transparent 60%),
    linear-gradient(90deg, #E1DFE2, #EAE8EB),
    linear-gradient(90deg, #EAE8EB, #E1DFE2),
    linear-gradient(90deg, #85817E, rgba(47,43,43,0) 5% 95%,  #696461), 
    linear-gradient(#4E4A49, #100C0D),
    linear-gradient(#312F32, #2A2A27, #363233);
  background-size: 50px 60px,
    50px 60px,
    185px 30px,
    185px 30px,
    100% 100%,
    100% 20px,
    100% 100%;
  background-repeat: no-repeat;
  background-position: 160px -26px,
    360px -26px,
    top right,
    top left,
    top left,
    bottom left, 
    bottom left;
  box-shadow: -1px 3px 2px 0px rgba(249,247,248, 0.65) inset;

}

.camera .bottom .printer {
  display: block;
  width: 470px;
  height: 40px;
  background-color: red;
  margin-le.........完整代码请登录后点击上方下载按钮下载查看