đ InformaciĂłn bĂĄsica:
El código de teléfono tapita viene con musica incluida
Se puede personalizar los 3 fondos de pantalla tanto como gifs y imĂĄgenes, tambiĂ©n se puede cambiar la musica del telĂ©fono sin problemas, aunque lo recomendable es que no dure mĂĄs de 37 segundos, porque se corta en ese segundo automĂĄticamente para no hacer largo el sonido de telĂ©fonoÂ
 (â *â ÂŽâ Ïâ ïœâ *â )Â
.
<!-- // Hello Kitty Slide - Freddy (â âĄâ  â Ïâ  â âĄâ )đȘČ// -->
<div id="hello-kitty"></div>
<div class="contenedor-telefono">
<style>
#hello-kitty { position: fixed; top: 0; left: 0; visibility: hidden; }
.contenedor-telefono {
position: fixed; bottom: 20px; right: 40px;
width: 104px; height: auto; z-index: 999; cursor: pointer;
}
.marco { position: relative; width: 100%; }
.pantalla {
position: absolute; z-index: 1;
top: 19.5% !important; left: 23.4% !important;
width: 53% !important; height: 28% !important;
background: #000; overflow: hidden;
}
/* Filtro de lĂneas */
.pantalla::before {
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(rgba(18, 16, 16, 0) 40%, rgba(0, 0, 0, 0.15) 50%);
background-size: 100% 1.5px; z-index: 10; pointer-events: none;
}
/* Efecto ondas de lĂneas */
.pantalla::after {
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
background-size: 100% 15px; z-index: 11; pointer-events: none;
animation: barrido 4s linear infinite;
}
@keyframes barrido { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
.imagen-fondo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0px !important; }
.carcasa { position: relative; z-index: 20; width: 100%; display: block; }
@keyframes bloqueo-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.bloqueo { position: absolute; top: 0; left: 0; z-index: 5; }
/* Estados */
.estado-abierto { display: none; }
#hello-kitty:target ~ .contenedor-telefono .estado-abierto { display: block; }
#hello-kitty:target ~ .contenedor-telefono .estado-abierto .bloqueo {
animation: bloqueo-fade 3s ease-in-out forwards;
}
#hello-kitty:target ~ .contenedor-telefono .estado-cerrado { display: none; }
.enlace { text-decoration: none !important; outline: none !important; }
.musica-oculta { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
</style>
<!-- TELĂFONO CERRADO -->
<a href="#hello-kitty" class="estado-cerrado">
<div class="marco">
<div class="pantalla">
<img src="https://i.postimg.cc/0ykMNX8h/cd63c62d2890295fa2aca31b43a5eeee.jpg" class="imagen-fondo">
</div>
<img src="https://i.postimg.cc/kgcPsfPH/280-sin-titulo3-20260405002040.png" class="carcasa">
</div>
</a>
<!-- TELĂFONO ABIERTO -->
<a href="#close" class="estado-abierto">
<div class="marco">
<div class="pantalla">
<img src="https://i.postimg.cc/jdQntYrB/7adaf66dff59ec2f60df53841ca1caee.jpg" class="imagen-fondo">
<img src="https://i.postimg.cc/wvT0cQcn/05ae1aa4d9ec52d3a4b69ba2c1e3fe70.gif" class="imagen-fondo bloqueo">
<!-- El sonido solo carga al abrir teléfono -->
<div class="musica-oculta">
<iframe width="1" height="1" src="https://www.youtube.com/embed/c4j9Z9bwBBU?autoplay=1&start=0&end=37" frameborder="0" allow="autoplay"></iframe>
</div>
</div>
<img src="https://i.postimg.cc/fLy2xvMw/280-sin-titulo3-20260405001818.png" class="carcasa">
</div>
</a>
</div>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
snowman
looks great ohh