<div style='display:flex;align-items:center;flex-direction:column;'>
  <div>
    <img src='https://image.ibb.co/i5xfqz/icon.png' width='50' height='50' class='img'></img>
    <img src='https://image.ibb.co/i5xfqz/icon.png' width='50' height='50' class='img'></img>
    <img src='https://image.ibb.co/i5xfqz/icon.png' width='50' height='50' class='img'></img>
  </div>
  <div style='color:coral;font-size:1.2rem;font-weight:bold;' class='title'>欢迎光临小黄商城网</div>
<input type='text' style='border-radius:3px;background:transparent;border:1px solid gray;padding-left:4px;' placeholder='请输入商品名'></input>
 <div id='tip'>试着输入1,12,123</div>
</div>
body {
  margin-top:12px;
}
input {
  margin-top:9px;
  padding: 7px 12px;
}
#tip {
  animation: shake 1s ease-in-out alternate infinite;
}
@keyframes shake {
  from {
     transform:translateY(20px);
  }
  to {
    transform:translateY(10px);
  }
}

const $input = document.querySelector('input');
const $title = document.querySelector('.title');
$input.addEventListener('input',(e)=>{
  switch(e.target.value) {
    case "1":$title.style.color='red';break;
    case "12":$title.style.color='green';break;
    case "123":$title.style.color='blue';break;
    case "1234":$title.textContent='没让你输4,真淘气';break;
    case "12345":$title.textContent='还输5?有本事继续输';break;
    case "123456":$title.textContent='嘿!你继续~';break;
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.