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