Caixa de Pesquisa Animada com Efeito Criado Com CSS

Veja uma demonstração:

Não encontrou o que você procura? Digite sua busca aqui nesta caixa e veja os resultados!

Para colocar no blogger

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<style>

#awan {

background: url(https://abs.twimg.com/images/themes/theme1/bg.png) center top repeat-x;

width: 589px;

height: 149px;

font-family: "Segoe UI Light","Open Sans Light",Sans-serif;

text-align: center;

font-size: 18px;

color: #fff;

animation: awan-animasi 10s linear infinite;

-ms-animation: awan-animasi 10s linear infinite;

-moz-animation: awan-animasi 10s linear infinite;

-webkit-animation: awan-animasi 10s linear infinite;

margin-bottom: 8px;

border: #fff solid 5px;

box-shadow: 0px 2px 0px rgba(0,0,0,0.1);

text-shadow: #fff 0px 2px 2px;

}

@keyframes awan-animasi {

from {

background-position: 0 0;

}

to {

background-position: 100% 0;

};

}

@-webkit-keyframes awan-animasi {

from {

background-position: 0 0;

}

to {

background-position: 100% 0;

};

}

@-ms-keyframes awan-animasi {

from {

background-position: 0 0;

}

to {

background-position: 100% 0;

};

}

@-moz-keyframes awan-animasi {

from {

background-position: 0 0;

}

to {

background-position: 100% 0;

};

}

</style>

<div id='awan'>




Não encontrou o que você procura? Digite sua busca aqui nesta caixa e veja os resultados!




<center>

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjphE8e9_F2JPjqIYr3B1WIyr3TfU7o96qoALFVsI69BNwGC5S6q-uXzqkt8yGWp8B6GafibycdeFHwi5d3j3r7cCLaRuY4pChuGwQ6gYh9Dp3bS54aw6EHfv9-cKSKaj1my4oJ4MYi0Rrj/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form action="/search" id="w2b-searchform" method="get">

<input id="s" name="q" type="text" value="" />

    <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />

</form>

</div>

</center>

</div>

<div id='#'>

</div>                                                                                                                                                   <div style="text-align: right;">

<span style="color: #eeeeee; font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com/" target="_blank"><span style="color: #eeeeee;">DicasHot</span></a></span></div>

Toda a parte destacada de azul, corresponde a caixa de busca. Você pode modificá-la. Veja outros estilos de caixas de busca nesta outra postagem: 
http://dicashot.blogspot.com.br/2014/05/caixa-de-pesquisa-simples-personalizada.html


Tendo colado o código, basta salvar e pronto!!!