Interruptor de encendido

1255 AmirAliAkrami

Abrir en el editor Publica tu código

Recomendado

15 November 2025

Formulario de transferencia de monedas con selección de pago

19 July 2023

Carrusel de tarjetas con CSS

29 August 2025

Ejemplo de contenedor de animación CSS

HTML

CSS

body {background-color: black;}

.box {
   border: 1px solid black;
   width: 800px;
   border-radius: 20px;
   height: 400px;
   
   margin: 100px auto;
   background-color: #f4f4f0;
}

.triangle {   box-shadow: 50px 120px 10px 5px #77787b33;
   width: 50px;
   height: 50px;
   background-color: #656562;
   margin: auto;
 border-bottom: 12px groove #77787b33;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;

}

#sim {box-shadow: 50px 120px 10px 5px #77787b33;
   background-color: black;
   width: 1px;
   height: 30px;
   margin: auto;
}

button { 
   background-color: rgb(213, 242, 213);
   width: 40px;
   height: 60px;
margin-top: 10px;
display:block;
   margin-left: 20px;
   border: none;
}

#btn {
   background-color: #8da165;
   width: 10px;
   height: 20px;
 transition: all 0.3s;
 border-top: 5px solid rgb(103, 97, 97);  
   margin-top: 1%;
margin-left:7.2px;

}

.text {

width: 200px;
   height: 50px;
   padding: 15px;
   margin-left: 37%;
   font-size: 35px;
   font-family: cursive;
   color: #eaece6;
   animation: GreenCode 1s linear infinite;
}

@keyframes GreenCode {
   0% {
      opacity: 0;
   }

50% {
      opacity: .5;
   }

100% {
      opacity: 1;
   }
}

.active {
   box-shadow: 0 150px 100px 95px #e8d724b3;
}

Recomendado

Formulario de transferencia de monedas con selección de pago

Carrusel de tarjetas con CSS

Ejemplo de contenedor de animación CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS