css中搜索的图片可爱的

CSS中搜索的图片可爱，让人眼前一亮，为网站增添了更多的趣味性。搜索图片可爱并不意味着要过分夸张，反而要注意掌握度，将场景和主题调和好。

下面就是一个搜索框动画图片的CSS代码示例：

.input {
  background: #fff url(../img/search-icon.png) no-repeat scroll 10px center;
  border: medium none;
  float: left;
  font-size: 14px;
  height: 45px;
  padding: 0px 0px 0px 50px;
  width: 450px;
}
.input:focus {
  outline:none;
  box-shadow:0 0 7px rgba(81, 203, 238, 1);
}
.search {
  background: #ffc000 none repeat scroll 0% 0%;
  border: medium none;
  color: #ffffff;
  cursor: pointer;
  float: right;
  font-size: 14px;
  font-weight: bold;
  height: 45px;
  margin-top: 20px;
  padding: 0px 20px;
  width: auto;
}
.search:hover {
  background-color: #ffa100;
} 

该代码中使用了一个search-icon.png的搜索图标，以及一些基础的CSS属性，包括背景、边框、浮动、字体大小、高度、内边距和宽度等等。在搜索框获得焦点时，在后面加入css的outline属性，增加了搜索框的点击效果，并应用了一个黄色背景和鼠标指针悬停时的变化。

总体来说，搜索图片可爱并不需要什么高深的CSS技巧，而是要找到一个适合自己网站主题和风格的设计。