css布局实现老式复古黑白电视机效果代码-html代码-BFW代码库

css布局实现老式复古黑白电视机效果代码

代码语言：html

代码描述：css布局实现老式复古黑白电视机效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        @font-face {
          font-family: "Heading Pro";
          src: url(//repo.bfw.wiki/bfwrepo/font/heading-pro.woff) format("woff");
          font-display: swap;
        }
        
        :root {
          --television-width: 430px;
          --television-height: 420px;
          --television-bgcolor: #b71a11;
          --television-bgcolor-dark: #88110b;
          --antenna-gradient: linear-gradient(to top, #444 10%, #999 25% 40%, #444 70%, #2224 90%);
        }
        
        body {
          margin: 0;
          background: #ff1313;
          background-image: radial-gradient(#fe5858, #fe1010);
        }
        
        .container {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 4em;
        }
        
        .tv {
          width: var(--television-width);
          height: var(--television-height);
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        
        .tv .antenna-container {
            width: 235px;
            height: 85px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
          }
        
        .tv .antenna-container .antenna {
              width: 100%;
              height: 4px;
              background: var(--antenna-gradient);
              transform-origin: 100% 50%;
              transform: rotate(20deg) translateY(3px);
              z-index: 0;
              display: flex;
              align-items: center;
            }
        
        .tv .antenna-container .antenna::before {
                content: "";
                display: block;
                width: 8px;
                height: 10px;
                background: var(--antenna-gradient);
                border-radius: 24% 53% 53% 24% / 36% 40% 40% 36%;
                border: 1px solid #444;
                border-left: 0;
                border-bottom: 0;
                transform: translateY(-1px);
              }
        
        .tv .television-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 1;
          }
        
        .tv .television-container .television {
              width: 425px;
              height: 300px;
              border-radius: 35px / 45px;
              box-shadow:
                2px 2px 5px #0004,
                2px -2px 2px darkred inset,
                2px 1px 1px #fff inset,
                0 0 3px 5px #0002;
              background: var(--television-bgcolor);
              background: linear-gradient(var(--television-bgcolor), var(--television-bgcolor-dark));
              display: flex;
              justify-content: center;
              align-items: center;
              z-index: 2;
            }
        
        .tv .television-container .television .television-inner {
                width: 93%;
                height: 90%;
                background: linear-gradient(to bottom, #454c45 5%, #232522 35% 45%);
                border-bottom: 1px solid #fff;
                box-shadow: 0 1px 2px #470404 inset;
                border-radius: 25px / 25px;
                position: relative;
                display: grid;
                grid-template-columns: 3fr 1fr;
                grid-template-rows: 0.8fr;
                align-content: center;
                gap: 3px;
              }
        
        .tv .television-container .television .television-inner .television-screen-container {
                  border: 1px solid #222;
                  box-shadow:
                    0 2px 2px #888,
                    2px 0 2px #444,
                    -2px 0 2px #444,
                    0 -2px 2px #111;
                  border-radius: 35px / 25px;
                  margin: 10px;
                  overflow: hidden;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background:
                    linear-gradient(70deg, #555 15%, transparent 30%),
                    repeating-conic-gradient(#222 0 30deg, #333 60deg, #222 90deg);
                }
        
        .tv .television-container .television .television-inner .television-screen-container .television-crt {
                    width: 99%;
                    height: 95%;
                    background: #111;
                    box-shadow:
                      0 0 5px 2px #111,
                      0 0 10px 2px #1112;
                    border-radius: 85px 85px 85px 85px / 100px 100px 100px 100px;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }
        
        ..........完整代码请登录后点击上方下载按钮下载查看