Cuadro de búsqueda

Abrir en el editor Publica tu código

Recomendado

21 September 2024

INICIO DEL SITIO WEB DEL BANCO

15 May 2025

body{
  margin: 0;
  padding: 0;
  background: #170a34;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.input {
  padding: 10px;
  width: 60px;
  height: 60px;
  background: none;
  border: 3px solid #ababff;
  border-radius: 50px;
  box-sizing: border-box;
  font-family: Comic Sans MS;
  font-size: 20px;
  color: #ababff;
  outline: none;
  transition: .8s;
  transition-delay: .2s;
}

.input.click{
  padding: 10px;
  padding-right: 60px;
  width: 300px;
  background: #221b3d;
  border-radius: 10px;
}
.btn{
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0;
  right: 0;
  background: none;
  border: none;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  transition: .2s;
}
span{
  position: absolute;
  width: 40px;
  height: 3px;
  top: 65px;
  left: 65px;
  background: #ababff;
  border-radius: 50px;
  transform: translate(-50%,-50%) rotate(45deg);
  transition: .2s;
}
span:nth-child(1).click{
  top: 50%;
  left: 50%;
  background: #cf0202;
}
span:nth-child(2){
  top: 50%;
  left: 50%;
  opacity: 0;
  transition-delay: .2s;
}
span:nth-child(2).click{
  transform: translate(-50%,-50%) rotate(-45deg);
  opacity: 1;
  background: #dc0505;
}

Cuadro de búsqueda

Recomendado

INICIO DEL SITIO WEB DEL BANCO

Un código de kouadioarmel055

diales de volumen

HTML

CSS

JS

Recomendado

INICIO DEL SITIO WEB DEL BANCO

Un código de kouadioarmel055

diales de volumen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS