单个div+css布局老式电视机效果代码-html代码-BFW代码库

单个div+css布局老式电视机效果代码

代码语言：html

代码描述：单个div+css布局老式电视机效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
:root {
  --white: #c1c8c7;
  --black: #1b173b;
  --blue: #1a254c;
  --light-blue: #1a4369;
  --dark-blue: #2a2345;
  --metallic-blue: #3e567a;
  --wenge: #684a60;
  --brown: #9f777c;
  --dark-brown: #433754;
  --gray: #acb6c0;
  --light-gray: #717a92;
  --dark-gray: #617b99;
}

body {
  background-color: #fbeaff;
}

#tv {
  width: 360px;
  height: 314px;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  background: 
    /* Control Buttons */ radial-gradient(
        var(--metallic-blue) 21px,
        transparent 22px
      )
      224px 159px / 44px 44px,
    radial-gradient(var(--metallic-blue) 21px, transparent 22px) 224px 106px /
      44px 44px,
    /* Sound Output */
      repeating-linear-gradient(var(--black) 0 4px, var(--dark-brown) 4px 10px)
      217px 212px / 56px 64px,
    /* Screen Section */
      linear-gradient(to right, var(--dark-blue) 200px, var(--dark-brown) 200px)
      14px 90px / 262px 194px,
    /* Body */ linear-gradient(to right, var(--wenge) 290px, var(--brown) 290px)
      left 74px / 360px 226px,
    /* Antenna */
      linear-gradient(to right, var(--blue) 62px, var(--light-blue) 62px) 208px
      64px / 76px 12px,
    linear-gradient(
        -60deg,
        transparent 50%,
        var(--dark-gray) calc(50% + 1px) 60%,
        transparent calc(60% + 1px)
      )
      250px top / 54px 74px,
    linear-gradient(
        60deg,
        transparent 50%,
        var(--dark-gray) calc(50% + 1px) 60%,
        transparent calc(60% + 1px)
      )
      180px top / 54px 74px,
    /* Bottom Section */
      linear-gradient(to right, var(--blue) 252px, var(--light-blue) 252px) 18px
      .........完整代码请登录后点击上方下载按钮下载查看