Carga de tostadas de huevos

1,483 byby.createsite

Abrir en el editor Publica tu código

Recomendado

13 June 2025

Un código de ashimadison8

26 January 2025

Un código de alqsdeus

28 January 2024

Código de Tarjeta Móvil en CSS

HTML

<circle cx="75" cy="110" r="28" 
           fill="url(#yolkGradient)" 
           class="egg-yolk"/>

<ellipse cx="68" cy="105" rx="8" ry="6" 
            fill="#fff59d" opacity="0.7"/>

<ellipse cx="85" cy="90" rx="12" ry="15" 
            fill="white" opacity="0.3"/>

<defs>
    <radialGradient id="eggWhiteGradient" cx="0.3" cy="0.3">
     <stop offset="0%" stop-color="#ffffff"/>
     <stop offset="70%" stop-color="#f5f5f5"/>
     <stop offset="100%" stop-color="#e8e8e8"/>
    </radialGradient>

</body>

CSS

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
body {
 font-family: Arial, sans-serif;
 background: black;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content:center;
 height: 100vh;
 width:100vw;
}

.container-frigideira {
 z-index:1;
 animation: mexerPanela 2.5s ease-in-out infinite;

}
.ovo-container{
 z-index:-1;
 left:20px;
 top:85px;
 transform:rotateX(55deg);
 animation: sincronizarComPanela 2.5s linear infinite;
}

@keyframes sincronizarComPanela {
 0%, 50% {
  transform: translateX(20px) translateY(45px) rotateX(55deg);
 }
 75% {
  transform: translateX(20px) translateY(-100px) rotateX(55deg);
 }
 85%{transform:  translateX(20px) translateY(-100px)  rotateX(225deg);}
 100% {
  transform: translateX(20px) translateY(45px) rotateX(225deg); 
 }
}

@keyframes mexerPanela {

0% { transform: translateX(0); }
 10% { transform: translateX(-25px); }
 20% { transform: translateX(25px); }  
 30% { transform: translateX(-25px); } 
 40% { transform: translateX(25px); } 
 45%{
  transform:translateX(0);
 }
 50% { transform: translateX(0) translateY(-10px); } 
 60% { transform: translateX(0) translateY(0); }   
 100% { transform: translateX(0); }
}

.frigideira {
 width: 120px;
 height: 35px;
 transform:rotateZ(180deg);
 background: linear-gradient(to bottom, #34495e, #2c3e50);
 clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
 position: absolute;
}

/* Cabo da frigideira */
.cabo {
 position: relative;
 left:150%;
 top: 50%;
 width: 80px;
 height: 8px;
 background: linear-gradient(to right, #8B4513, #A0522D);
 border-radius: 4px;

}