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

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

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