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