div+css绘制电视遥控器代码-html代码-BFW代码库

代码语言：html

代码描述：div+css绘制电视遥控器代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');
        
        article {
          height: 90vmin;
          aspect-ratio: 13 / 50;
          position: relative;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: Ubuntu, sans-serif;
          border-radius: 100% 100% 110% 110% / 10% 10% 15% 15%;
          background: 
            /* microphone */
            radial-gradient(circle at 50% 3.5%, #111 0.45vmin, #0000 0),
            radial-gradient(circle at 50% 4.5%, #1a1a1a 0.45vmin, #0000 0),
            linear-gradient(#080808, #1a1a1a) 50% 3.5% / 1vmin 0.9vmin no-repeat,
            /* central-button-shadow */
            radial-gradient(circle at 47.5% 27%, #0000 7%, #0002 10%, #0000 0),
            /* noise / texture */
            radial-gradient(circle, #00000011 1.5%, #0000 2%) 50% 50% / 11% 2.5%,
            radial-gradient(circle at 80% 10%, #ffffff07 1.75%, #fff0 2%) 11% 0% / 7.4% 3.33%,
            radial-gradient(circle, #00000011 1.75%, #0000 2%) 13% 2% / 7% 6%,
            radial-gradient(circle, #ffffff07 1.5%, #fff0 5%) 2% 5% / 7% 2%,
            radial-gradient(circle, #00000011 1.75%, #0000 4%) 17% 13% / 8% 9%,
            radial-gradient(circle, #ffffff06 1.5%, #fff0 3%) 21% 23% / 4% 8%,
            radial-gradient(circle, #00000011 1.75%, #0000 3%) 23% 7% / 6% 4%,
            radial-gradient(circle, #ffffff09 1.5%, #fff0 3%) 5% 3% / 3% 5%, 
            radial-gradient(circle at 70% 80%, #00000011 2.28%, #fff0 3.33%) 5% 5.5% / 3% 4.5%,
            radial-gradient(circle at 20% 20%, #ffffff03 2.66%, #fff0 3.66%) 3% 5% / 2% 3%,
            radial-gradient(circle at 40% 70%, #00000011 2%, #fff0 3.4%) 5% 7.5% / 3% 4.5%,
            radial-gradient(circle at 60% 30%, #ffffff05 2%, #fff0 3%) 3% 9.5% / 3.33% 4.44%,
            /* base */
            radial-gradient(130% 55% at 0 0%, #ccc3, #fff0),
            radial-gradient(farthest-side at 0 5%, #fff3, #fff0 90%),
            radial-gradient(farthest-side at 100% 95%, #0002, #0000 90%),
            radial-gradient(200% 50% at 107% 98%, #000, #0000 12%),
            radial-gradient(200% 50% at -7% 98%, #000, #0000 12%),
            radial-gradient(100% 7% at 50% 100%, #0007, #0000),
            radial-gradient(300% 100% at 50% 0, #0000, #0001 95%, #ffffff18 95.5%, #fff1 97%, #0000 99.9%),
            linear-gradient(to top, #222 30%, #2220),
            linear-gradient(90deg, #222, #fff2 2%, #0000 5% 92%, #000a 96%, #fff2 98%, #0008 98.5%) 0 0 / 100% 100% no-repeat,
            linear-gradient(90deg, #0000, #1f1e1a, #1f1e1a44),
            linear-gradient(90deg, #2a2925, #222);
          box-shadow:
            inset 0.2vmin -0.2vmin 0.5vmin #1a1915,
            inset 0.3vmin 0vmin 0.8vmin #fff2,
            inset -0.1vmin -0.2vmin 0.3vmin #1a1915,
            inset -0.2vmin 0vmin 3vmin #fff2,
            inset 0 0.3vmin 0.6vmin #000a,
            inset 0vmin 0.4vmin 0.8vmin #fff8
        }
        
        article * {
          position: absolute;
          box-sizing: border-box;
        }
        
        h1 {
          color: #0009;
          left: 50%;
          transform: translate(-50%, -50%);
          top: 83.5%;
          font-size: 4.33vmin;
          letter-spacing: -0.25vmin;
        }
        
        button {
          --bg: #2e2c2d33; /* 1f1e1a */
          --icon: linear-gradient(#0000 0 0);
          --icon-color: #eee8;
          --icon-color-solid: #eee;
          --icon-color-solid-opacity: 0.5;
          aspect-ratio: 1;
          width: 21.5%;
          border-radius: 50%;
          border: 0 solid;
          transform: translate(-50%, -50%);
          overflow: hidden;
          background:
            var(--icon),
            linear-gradient(135deg, #2e2c2d00, #1e1c1d88),
            var(--bg);
          box-shadow:
            0 0 0.25vmin #000c,
            0 0 0.1vmin 0.1vmin #0003,
            inset 0 0 0.25vmin #0008,
            inset 0.25vmin 0.25vmin 0.25vmin #fff1,
            inset -0.25vmin -0.25vmin 0.25vmin #0005,
            inset 0 -0.25vmin 0.75vmin -0.25vmin;
        }
        
        .row1 {
          top: 43.75%;
        }
        
        .row2 {
          top: 54.66%;
        }
        
        .col1 {
          left: 21%;
        }
        
        .col2 {
          left: 50%;
        }
        
        .col3 {
          left: 79%;
        }
        
        .microphone {
          left: 50%;
          top: 11.75%;
        }
        
        .central {
          width: 79%;
          left: 50%;
          top: 27.75%;
          -webkit-mask: radial-gradient(#0000 41%, #000 0);
          mask: radial-gradient(#0000 41%, #000 0);
          background:
            radial-gradient(at 50.1% 50.1%, #0008 40%, #0000 43%),
            
            /* shinny */
            radial-gradient(50% 50% at -0.75% 105%, #1b1b1b 52%, #0000 55%) 0% 55% / 86.5% 40% no-repeat,
            radial-gradient(50% 50% at -0.75% 105%, #2f2d2c 52%, #0000 55%) 0% 85% / 125% 35% no-repeat,
            radial-gradient(65% 58% at 50% 43.5%, #0f0f0fcc 42%, #0000 43%),
            radial-gradient(67% 60% at 50% 40%, #3b3b3b 41%, #0000 42%),
            radial-gradient(75% 80% at 50% 46%.........完整代码请登录后点击上方下载按钮下载查看