纯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-left: auto;
  margin-right: auto;
  margin-top: 60px;
  border-radius: 3px;
  
  background-image: linear-gradient(90deg, #474548 90%, #343233 90%),
    linear-gradient(90deg, #0E090D 10%, #4A4849 10%),
    linear-gradient(#4C4A4D 4%, #161214 9% 20%, #484445 30% 55%, #1A1617 80% 93%, #B0AFAD 99%);
  background-size: 8px 100%, 8px 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: top left, top right;
}

.camera .bottom .labels .rainbow {
  display: block;
  width: 40px;
  height: 46px;
  position: absolute;
  top: 100px;
  left: 80px;
  background-image: linear-gradient(
    #1D160F 5%, /* Black*/
    #0E9EE0 5% 14%, /* Blue */
    #1F211A 14% 19%, /* Black */
    #0EAE4F 19% 32%, /* Green */
    #2B2106 32% 37%, /* Black */
    #FFB404 37% 50%, /* Yellow */
    #2A1303 50% 55%, /* Black */
    #FE8204 55% 68%, /* Orange */
    #292313 68% 80%, /* Black */
    #E02D28 80% /* Red */
  );
}

.camera .bottom .labels .logo {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
.........完整代码请登录后点击上方下载按钮下载查看