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

代码语言：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-left:6px;
          color:#f1f1f1; 
          opacity:0.6;
        }
        
        .play-line {
          margin-top:-4px; 
        }
        
        .line {
        }
        /**********MIDDLE SECTION**************/
        
        
        .middle {
          position: absolute;
          margin-top:10px;
        }
        
        
        .volume {
            width: 75px;
            height: 75px;
            margin-left:15px;
            background-image: linear-gradient(#000000, #BDBDBD, #000000);
            border:1px solid black;
            border-radius:50%;
        }
        
        .innervolume {
            width: 65px;
            height: 65px;
            margin-top:2px;
            margin-left:2px;
            background-image: linear-gradient(#000000, #BDBDBD, #000000);
            border:3px solid black;
            border-radius:50%;
        }
        
        .menu {
          margin-left:10px;
            width: 54px;
            font-size:12px;
            padding-left:0px;
             padding-top:5px;
             padding-bottom:5px;
            background-image: linear-gradient(#000000, #BDBDBD, #000000);
        }
        
        .menu-line {
        margin-top:0px;
        }
        
        
        .innertune {
            width: 65px;
            height: 65px;
            margin-top:2px;
            margin-left:2px;
            background-image: linear-gradient(#000000, #BDBDBD, #000000);
            border:3px solid black;
            border-radius:50%;
        }
        
        /**************DISPLAY CONTAINER **************************/
        .display {
          margin-left:15px;
          width:425px;
          border:4px solid #474747;
          font-family: 'DSEG14ClassicRegular';
          font-size:12px;
          background:black;
          border-radius:5px;
        }
        
        
        
        .row {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          width: 100%;
        }
        
        .column {
          display: flex;
          flex-direction: column;
           flex-basis: 100%;
          flex: 1
        }
        
        .cd-column {
          background-color: black;
          padding:5px;
          color:#0066a3;
          text-align:left;
        }
        
        .stereo-column {
          background-color: black;
          padding:5px;
           height:24px;
          font-family: 'Inter', sans-serif;
          font-size:10px;
        }
        
        
        .song-column {
          overflow:hidden;
          display:flex;
          background-color: black;
          padding:5px;
          width:250px;
          font-size:16px;
          color:darkorange;
        }
        
        /* DEMO-SPECIFIC STYLES */
        .typewriter h5 {
          overflow: hidden; /* Ensures the content is not revealed until the animation */
         /* border-right: .15em solid orange; /* The typwriter cursor */
          white-space: nowrap; /* Keeps the content on a single line */
          margin: 0 auto; /* Gives that scrolling effect as the typing happens */
          letter-spacing: .15em; /* Adjust as needed */
          animation: 
            typing 3.5s steps(30, end),
            blink-caret .5s step-end infinite;
        }
        
        /* The typing effect */
        @keyframes typing {
          from { width: 0 }
          to { width: 100% }
        }
        
        
        
        .equalizer-container {
          display: flex;
          align-items: flex-end;
          margin-top:0px;
          height:40px;
        }
        
        .equalizer-column {
          background-color: black;
          height:40px;
        }
        
        .bar {
            background-color: #0066a3;
            width: 7px;
            height: 0;
            margin-left:3px;
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }
        
        
        .bar:nth-child(1) {
            animation: bnce .7s .1s infinite alternate;
        }
        @keyframes bnce {
            30%{
              height: 30px;
              background-color: tomato;
            }
            60% {
               height: 35px;
               background-color: purple;
            }
            100% {
                height: 25px;
                background-color: red;
            }
        }
        .bar:nth-child(2) {
            animation: bnce2 .5s .5s infinite alternate;   
        }
        @keyframes bnce2 {
            20%{
              height: 35px;
              background-color: deepskyblue; 
            }
            40% {
                height: 30px;
                background-color: orange;
            }
            100% {
                height: 35px;
                background-color: green;
            }
        }
        .bar:nth-child(3) {
            animation: bnce3 .8s .3s infinite alternate;   
        }
        @keyframes bnce3 {
            80%{
              height: 25px;
            }
            100% {
                background-color: blue;
            }
        }
        .bar:nth-child(4) {
            animation: bnce4 .6s .7s infinite alternate;   
        }
        @keyframes bnce4 {
            70% {
              height: 30px; 
            }
            100% {
              background-color: brown;
            }
        }
        .bar:nth-child(5) {
            animation: bnce5 .5s .2s infinite alternate;   
        }
        @keyframes bnce5 {
            60%{
              height: 20px;
            }
            100% {
                background-color: purple;
            }
        }
        
        
        
        .bar:nth-child(6) {
            animation: bnce .7s .1s infinite alternate;
        }
        @keyframes bnce {
            30%{
              height: 30px;
              background-color: tomato;
            }
            60% {
               height: 35px;
               background-color: purple;
            }
            100% {
                height: 25px;
                background-color: red;
            }
        }
        .bar:nth-child(7) {
            animation: bnce2 .5s .5s infinite alternate;   
        }
        @keyframes bnce2 {
            20%{
              height: 35px;
              background-color: deepskyblue; 
            }
            40% {
                height: 30px;
                background-color: orange;
            }
            100% {
                height: 35px;
                background-color: green;
            }
        }
        .bar:nth-child(8) {
            animation: bnce3 .8s .3s infinite alternate;   
        }
        @keyframes bnce3 {
            80%{
              height: 25px;
            }
            100% {
                background-color: blue;
            }
        }
        .bar:nth-child(9) {
            animation: bnce4 .6s .7s infinite alternate;   
        }
        @keyframes bnce4 {
            70% {
              height: 30px; 
            }
            100% {
              background-color: brown;
            }
        }
        .bar:nth-child(10) {
            animation: bnce5 .5s .2s infinite alternate;   
        }
        @keyframes bnce5 {
            60%{
              height: 20px;
            }
            100% {
                background-color: purple;
            }
        }
        
        
        
        .bar:nth-child(11) {
            animation: bnce2 .5s .5s infinite alternate;   
        }
        @keyframes bnce2 {
            20%{
              height: 35px;
              background-color: deepskyblue; 
            }
            40% {
                height: 30px;
                background-color: orange;
            }
            100% {
                height: 35px;
                background-color: green;
            }
        }
        .bar:nth-child(12) {
            animation: bnce3 .8s .3s infinite alternate;   
        }
        @keyframes bnce3 {
            80%{
              height: 25px;
            }
            100% {
                background-color: blue;
            }
        }
        .bar:nth-child(13) {
            animation: bnce4 .6s .7s infinite alternate;   
        }
        @keyframes bnce4 {
            70% {
              height: 30px; 
            }
            100% {
              background-color: brown;
            }
        }
        .bar:nth-child(14) {
            animation: bnce5 .5s .2s infinite alternate;   
        }
        @keyframes bnce5 {
            60%{
              height: 20px;
            }
            100% {
                background-color: purple;
            }
        }
        
        
        
        .r2c1-column {
          background-color: black;
           padding:5px;
           height:24px;
          color:darkorange;
        }
        
        
        .clock-column {
          background-color:black;
           padding:5px;
           height:24px;
          text-align:right;
          color:#0066a3;
        }
        
        .temp {
          background-color: black;
          margin-top:20px;
         margin-left:50px;
           color:#0066a3;
.........完整代码请登录后点击上方下载按钮下载查看