FMRadio

<div class='inner-item'><!doctype html>




FM RADIO EN VIVO

<style>

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

body{
background:linear-gradient(-45deg,#07111f,#0c1f38,#14345f,#1b4d8c);
background-size:400% 400%;
animation:fondo 12s ease infinite;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
color:white;
}

@keyframes fondo{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.radio{
width:360px;
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
text-align:center;
box-shadow:0 0 30px rgba(0,255,255,.4);
}

.logo{
width:180px;
height:180px;
border-radius:50%;
border:5px solid #00ffff;
animation:girar 18s linear infinite;
box-shadow:0 0 25px cyan;
}

@keyframes girar{
100%{
transform:rotate(360deg);
}
}

h1{
margin-top:20px;
font-size:30px;
color:#00ffff;
}

.estado{
margin-top:10px;
font-size:18px;
color:#ffffff;
}

audio{
width:100%;
margin-top:20px;
}

button{
margin-top:15px;
padding:14px 30px;
border:none;
border-radius:40px;
background:#00c3ff;
font-size:18px;
color:white;
cursor:pointer;
transition:.4s;
}

button:hover{
background:#0098c7;
}

.ecualizador{
display:flex;
justify-content:center;
align-items:flex-end;
height:60px;
margin-top:25px;
}

.barra{
width:8px;
background:#00ffff;
margin:0 3px;
animation:sonido 1s infinite;
}

.barra:nth-child(1){height:20px;animation-delay:0s;}
.barra:nth-child(2){height:40px;animation-delay:.2s;}
.barra:nth-child(3){height:60px;animation-delay:.4s;}
.barra:nth-child(4){height:30px;animation-delay:.6s;}
.barra:nth-child(5){height:50px;animation-delay:.8s;}

@keyframes sonido{
50%{
height:10px;
}
100%{
height:60px;
}
}

</style>



<div class="radio">

<img class="logo" 
src="https://blogger.googleusercontent.com/img/a/AVvXsEjCr4ivufv6v7HIUICo8JMxJ1F6iwDoNdvTQNiod1MqXzB7Fhho_LXcs0NTlAkxazMgVMyKjbH4U25da8B6ba0xDSgl0gN0HnaoI1I3wBrdzAl0WG17u04FuezHZO9n3vv5LpKYVskDKUyHvo9bn0Ozc4RQ12dSzTnDjcoGABvkV6tymabcUfZ5pMVUtg0=w1280-rw-l80-e30" />

<h1>FM RADIO</h1>

<div class="estado">
📻 Transmisión en vivo 24/7
</div>

<audio id="player" controls>
<source src="https://fluoz.zeno.fm/v9zmqe4uxwzuv/source" type="audio/mpeg">
</source></audio>

<button onclick="document.getElementById('player').play()">
▶ ESCUCHAR EN VIVO
</button>

<div class="ecualizador">
<div class="barra"></div>
<div class="barra"></div>
<div class="barra"></div>
<div class="barra"></div>
<div class="barra"></div>
</div>

</div>


</!doctype></div>
Sin título

Sin título
