js+css实现老式汽车收音机多媒体播放电台效果代码-html代码-BFW代码库

js+css实现老式汽车收音机多媒体播放电台效果代码

代码语言：html

所属分类：多媒体

代码描述：js+css实现老式汽车收音机多媒体播放电台效果代码，点击播放按钮收听电台。

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

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

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





    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
        @import url('https://fontlibrary.org/face/dseg14');
        
        body {
          font-family: 'Inter', sans-serif;
          background:url("data:image/webp;base64,UklGRkoDAABXRUJQVlA4WAoAAAAgAAAACQAABwAASUNDUKACAAAAAAKgbGNtcwQwAABtbnRyUkdCIFhZWiAH5wAEAAoAEwACADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA1kZXNjAAABIAAAAEBjcHJ0AAABYAAAADZ3dHB0AAABmAAAABRjaGFkAAABrAAAACxyWFlaAAAB2AAAABRiWFlaAAAB7AAAABRnWFlaAAACAAAAABRyVFJDAAACFAAAACBnVFJDAAACFAAAACBiVFJDAAACFAAAACBjaHJtAAACNAAAACRkbW5kAAACWAAAACRkbWRkAAACfAAAACRtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACQAAAAcAEcASQBNAFAAIABiAHUAaQBsAHQALQBpAG4AIABzAFIARwBCbWx1YwAAAAAAAAABAAAADGVuVVMAAAAaAAAAHABQAHUAYgBsAGkAYwAgAEQAbwBtAGEAaQBuAABYWVogAAAAAAAA9tYAAQAAAADTLXNmMzIAAAAAAAEMQgAABd7///MlAAAHkwAA/ZD///uh///9ogAAA9wAAMBuWFlaIAAAAAAAAG+gAAA49QAAA5BYWVogAAAAAAAAJJ8AAA+EAAC2xFhZWiAAAAAAAABilwAAt4cAABjZcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltjaHJtAAAAAAADAAAAAKPXAABUfAAATM0AAJmaAAAmZwAAD1xtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAEcASQBNAFBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJWUDgghAAAALACAJ0BKgoACAAAAAAllAJ0BcEX+d4AA7KGy4yK4AD+//+xk8s/+YZ5K+1ixKN0Nx/9jQeWdVN7L3L+v+vKP5Unjj/9Xgd3AxiBMjdvxbujiZQ98L5joU8H4ScXf6QJOkgdFiZj/sqlefoHHJjtF8x7H//kjAsqGL+4y5kIpL1ZUgAAAA==");
        
        }
        
        h3 {
          text-align:center;
          color:darkorange;
          text-shadow: 5px 5px 10px black;
        }
        
        .radio {
          margin:0 auto;
          margin-top:80px;
          width:830px;
          border:1px solid black;
          border-radius:10px;
          background-image: linear-gradient(#000000, #BDBDBD, #000000)
        }
        
        .inner-radio {
          width:810px;
          border:1px solid black;
          border-radius:10px;
          margin:10px;
          padding-top:10px;
          background:#3B3E43;
        }
        
        .brand {
          color:#f1f1f1;
          margin-left:330px;
        }
        
        
        
        .FlexContainer {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: flex-start;
            align-content: flex-start;
            overflow: auto;
            flex-direction: row;
            text-align:center;
            overflow-y: hidden;
            overflow-x: hidden;
        }
        
        .play {
            width: 54px;
            height: 34px;
            margin: 5px;
            margin-right:10px;
            margin-left:15px;
            background-image: linear-gradient(#000000, #BDBDBD, #000000);
        }
        
        button {
            width: 54px;
            height: 34px;
            opacity:0.2;
        }
        
        input {
          background:transparent;
          border:none;
          height:34px;
          color:white;
          font-size:12px;
          padding-left:7px;
          font-family: 'Inter', sans-serif;
          cursor: pointer;
        }
        
        input:active {
          margin-top:2px;
          background:transparent;
          border:none;
          height:34px;
        }
        
        
          .triangle {
           margin:0 auto;
           margin-top:9px;
           width: 0px;
           height: 0px;
           border-style: solid;
           border-width: 0 7.5px 13.0px 7.5px;
           border-color: transparent transparent #f1f1f1 transparent;
           transform: rotate(0deg);
           opacity:0.9;
        }
        
        
        
        .cd {
          margin-top:12px;
          width:650px;
          height:15px;
          border:1px solid black;
          border-radius:10px;
          background-image: linear-gradient( #000000, #999999);
        }
        
        .inner-cd {
          margin-top:4px;
          margin-left:2px;
          width:644px;
          height:5px;
          border:1px solid black;
          border-radius:10px;
          background:black;
        }
        
        
        .src {
            width: 54px;
            height: 34px;
            margin: 5px;
            margin-right:15px;
            margin-left:10px;
            background-image: linear-gradient(#000000, #BDBDBD, #000000);
        }
        
        .src-text {
          margin-top:9px;
          margin.........完整代码请登录后点击上方下载按钮下载查看