Hooola~~ hoy os traigo con un tuto muy cuqui que hace que los blockquotes se muevan y al posar el cursor paren el movimiento *-* Aquí un ejemplo:

Mensajito de prueba

¿Cómo colocarlo? Añade este código en <style>: [¡Modifica lo que está en negrita a tu gusto!]
blockquote{-webkit-user-select:text;-moz-user-select:text;-webkit-animation-name: shake;-webkit-animation-duration: 3s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;background-position:bottom right;background-repeat:no-repeat;background-image: url(http://media.tumblr.com/tumblr_m7etdc6exs1qb1380.gif);padding:15px;border-top:3px solid #c8f099;border-bottom:5px double #c8f099;border-right:1px dashed #8dbd57;border-left:1px dashed #8dbd57;color:#9C9C9C;-webkit-transition: 1.0s;-moz-transition: 1.0s;}

blockquote:hover{-webkit-animation-name: none;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;-webkit-transition: 1.0s;-moz-transition: 1.0s;color:#555;}

-webkit-animation-name: none;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;-webkit-transition: 1.0s;-moz-transition: 1.0s;color:#555;}@-moz-keyframes shake /* Firefox*/{{ -ms-transform:: tran slate(-1px, -2px) rotate(-1deg); }20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }30% { -moz-transform: translate(0px, 2px) rotate(0deg); }40% { -moz-transform: translate(1px, -1px) rotate(1deg); }50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }90% { -moz-transform: translate(2px, 2px) rotate(0deg); }100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }}@-ms-keyframes shake /* IE9*/{10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }30% { -ms-transform: translate(0px, 2px) rotate(0deg); }40% { -ms-transform: translate(1px, -1px) rotate(1deg); }50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }90% { -ms-transform: translate(2px, 2px) rotate(0deg); }100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }}@-webkit-keyframes shake /* Safari and Chrome */{0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }}

Te traigo varios ejemplos:

Mensajito de prueba con estilo 1

blockquote {
border-right: 7px solid #FFB0CA;
border-left: 7px solid #FFB0CA;
background-color: #F2EDEF;
padding: 10px;
font-size: 11px;
color: #7F7F7F;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #D2D0D5;
-webkit-transition-duration: .50s;
}
blockquote:hover {
border-right: 11px solid #DA8AFF;
border-left: 11px solid #DA8AFF;
background-color: #F2EDEF;
padding: 10px;
font-size: 11px;
color: #999999;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #D2D0D5;
-webkit-transition-duration: .50s;
}

Mensajito de prueba con estilo 2


blockquote{
background:url(http://fc04.deviantart.net/fs70/f/2013/162/8/5/pastel_goth_custom_bg_by_krowsy-d68no9g.jpg);
padding:10px;
color:#000; /* Color Del Texto */
letter-spacing:1px;
border-radius:10px;
border:2px solid #ccc; /* Tamaño, Tipo & Color Del Borde */
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-shadow: -1px 0 fff, 0 1px fff,
1px 0 fff, 0 -1px fff;
}
blockquote:hover{
background:url(http://fc04.deviantart.net/fs70/f/2013/162/8/5/pastel_goth_custom_bg_by_krowsy-d68no9g.jpg);
background-position:50% 50%;
}

Mensajito de prueba con estilo 3


blockquote{
font-family:century gothic;
background:#fff url(Url_Del_Fondo);
box-shadow:inset 0px 10px 0px #FFB5DD,inset 0px -10px 0px #D2FDE1;
font-size:12px;
border: 1px solid #D2FDE1;
padding: 30px;
-webkit-transition-duration: 1s;
}
blockquote:hover{
text-shadow: 0 0 0.5em #FFF , 0 0 0.5em #FFF;
font-size:12px;
border: 1px solid #D2FDE1;
box-shadow:inset 0px 900px 0px #E1BDF8,inset 0px -900px 0px #D2FDE1;
padding: 30px;
-webkit-transition-duration: 2s;
}

Créditos a: Lunary, Yukii, Afiqah Junizan
グッドラック!

ラベル: