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=Hind:wght@300&family=Press+Start+2P&family=Rock+3D&family=Wendy+One&display=swap');
        
        body {
          background-color: white;
        }
        
        .camera {
          position: absolute;
          top: 50%;
          left:50%;
          transform: translate(-50%,-50%);
        }
        
        .camera .top { 
          margin-top: -20px;
          margin-left: 15px;
          width: 450px;
          height: 250px;
          border-radius: 35px 35px 0 0;
          background: linear-gradient(#2d2c2e, #2e2e29, #3b3738);
          box-shadow: -1px 1px 2px 5px rgba(255,255,255, 0.80) inset;
        }
        
        .camera .bottom {
          width: 480px;
          height: 160px;
          border-radius: 10px 10px 30px 30px;
          background: linear-gradient(#2d2c2e, #2e2e29, #3b3738);
          box-shadow: -2px 5px 2px 0px rgba(255,255,255, 0.60) inset;
        }
        
        .camera .red {
          display: block;
          position: absolute;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-top: 180px;
          margin-left: 15px;
          background-image: radial-gradient(red 50%, #e0605c 60%);
          border: 2px solid #2d2c2e;
          box-shadow:  13px 13px 26px #262527,
            -13px -13px 26px #343335;
        }
        
        .camera .bottom1 {
          display: block;
          position: absolute;
          width: 150px;
          height: 40px;
          margin-top: 5px;
          margin-left: 325px;
          border-radius: 5px;
          background: linear-gradient(#2d2c2e, #2e2e29, #3b3738);
          box-shadow: -2px -1px 2px 0px rgba(255,255,255, 0.20),
            2px -1px 2px 0px rgba(255,255,255, 0.20);
        }
        
        .camera .middle {
          display: block;
          position: absolute;
          width: 140px;
          height: 40px;
          margin-top: 5px;
          margin-left: 165px;
          border-radius: 5px;
          background: linear-gradient(#2d2c2e, #2e2e29, #3b3738);
          box-shadow: inset -2px -1px 2px 0px rgba(0,0,0, 0.60),
            inset 2px -1px 2px 0px rgba(0,0,0, 0.60);
        }
        
        .camera .middle_1 {
          display: block;
          position: absolute;
          width: 130px;
          height: 20px;
          margin-top: 15px;
          margin-left: 170px;
          border-radius: 50px;
          background: linear-gradient(#2d2c2e, #2e2e29, #3b3738);
          box-shadow: -2px -1px 2px 0px rgba(0,0,0, 0.60),
            2px 1px 2px 0px rgba(0,0,0, 0.60);
        }
        
        .camera .middle_2 {
          display: block;
          position: absolute;
          width: 20px;
          height: 20px;
          margin-top: 15px;
          margin-left: 270px;
          border-radius: 50%;
          background: linear-gradient(#2d2c2e, #2e2e29, #3b3738);
          box-shadow: -2px -1px 4px 0px rgba(0,0,0, 0.60),
            2px 1px 4px 0px rgba(0,0,0, 0.60);
        }
        
        .camera .bottom2 {
          display: block;
          position: absolute;
          width: 150px;
          height: 40px;
          margin-top: 5px;
          border-radius: 5px;
          background: linear-gradient(#2d2c2e, #2e2e29, #3b3738);
          box-shadow: -2px -1px 2px 0px rgba(255,255,255, 0.20),
            2px -1px 2px 0px rgba(255,255,255, 0.20);
        }
        
        .camera .print {
          display: block;
          position: absolute;
          width: 400px;
          height: 30px;
          padding: 5px;
          border-radius: 3px;
          margin-left: 35px;
          margin-top: 60px;
          background: linear-gradient(black, #2e2e29, black);
          box-shadow: 2px 0px 2px 0px rgba(255,255,255, 0.60) inset,
            -2px 0px 2px 0px rgba(255,255,255, 0.60) inset;
        }
        
        .camera .polaroid {
          font-family: 'Hind', sans-serif;
          font-weight: 600;
          position: absolute;
          font-size: 24px;
          letter-spacing: 3px;
          color:#D3D3D3;
          margin-top: 120px;
          margin-left: 180px;
        }
        
        .camera .grey {
          position: absolute;
          width: 45px;
          height: 55px;
          margin-top: 100px;
          margin-left: 70px;
          background-image: repeating-linear-gradient(
          grey,
          black 10px,
          grey 10px,
          black 20px
        )
        }
        
        .camera .rainbow {
          position: absolute;
          width: 55px;
          height: 55px;
          margin-top: 190px;
          margin-left: 195px;
          transform: rotate(90deg);
          background-image: linear-gradient(
            #08a1e2 20% 20%,
            #0bbd2f 40%, 40%,
            #f0e035 60%, 60%,
            #f0a535 80%, 80%,
            #df118f 80% 
          );
        }
        
        .camera .circle1 {
          position: absolute;
          width: 23px;
          height: 23px;
          margin-top: 70px;
          margin-left: 95px;
          border-radius: 50%;
          background: black;
          box-shadow: inset 0px 1px 1px 1px rgba(255,255,255,0.3), 0 -1px 1px rgba(255,255,255,0.5);
        }
        
        .camera .circle2 {
          position: absolute;
          width: 23px;
          height: 23px;
          margin-top: 170px;
          margin-left: 290px;
          border-radius: 50%;
          background: black;
          box-shadow: inset 0px 1px 1px 1px rgba(255,255,255,0.2), inset 0 -1px 1px rgba(255,255,255,0.5);
        }
        
        .camera .square {
          position: absolute;
          width: 23px;
          height: 23px;
          margin-top: 30px;
          margin-left: 95px;
          background: black;
          box-shadow: inset 0px 1px 1px 1px rgba(255,255,255,0.3), 0 -1px 1px rgba(255,255,255,0.5);
        }
        
        .camera .middle_len {
          position: absolute;
          display: block;
          width: 180px;
          height: 180px;
          margin-top: 20px;
          margin-left: 130px;
          border-radius: 50%;
          z-index: 1;
          background-image: radial-gradient(transparent, black),
            radial-gradient(
              black 0% 27%, 
              black 20% 20%, 
              grey 21% 21%, 
              black 21% 22%, 
              grey 23% 23%, 
              black 24% 24%, 
              grey 25% 25%, 
              black 26% 26%, 
              grey 27% 27%, 
              black 28% 28%, 
              grey 29% 29%,
              black 30% 30%, 
              grey 31% 31%, 
              black 32% 32%, 
              grey 33% 33%,
              black 34% 34%, 
              grey 35% 35.........完整代码请登录后点击上方下载按钮下载查看