Efeito Increase Rotate

Olá queridos coelhos! Hoje venho trazer mais um efeito de imagens, ele é ótimo para usar próximo ao banner do blog, já que suas imagens são repetidas automaticamente. Muito fácil de entender e personalizar, os créditos vão para o blog Chá com Anjos, se tiverem qualquer duvida é só deixa um comentários que responderei o mais rápido possível! Espero que gostem do efeito. 

Brevia do efeito

1.  Escolha o blog qual deseja aplicar, e vá ate seu HTML. Chegando lá ative a pesquisa cm o atalho Ctrl+U e pesquise por ]]></b:skin>, acima dele cole: 

Códigos

.rotatesd {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: block;
    margin: 20px;
    float: left;
    background: #9fcae8;
    position: relative;
    box-shadow:
        0px 0px 5px 0px #80a9c6 inset,
        0px -1px 5px 4px #80a9c6 inset,
        0px 0px 0px 7px #fff,
        0px 0px 1px 8px rgba(188, 188, 188, 0.4),
        0px 0px 0px 9px #fff;
    -webkit-transition: all 0.3s linear;

}
.rotatesd span{
    display: table-cell;
    width: 80px;
    height: 80px;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 26px;
    color: #fff;
    text-shadow: 0px 1px 1px #80a9c6;
    font-family: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
     -webkit-transition: all 0.3s linear;
}
.rotatesd span:nth-child(1),
.rotatesd span:nth-child(3){
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 20px;
    line-height: 36px;
    opacity: 0;
}
.rotatesd span:nth-child(1){
    background: transparent url(http://static.tumblr.com/b1gnlwd/IIEmegzpj/bg.png) no-repeat center center;
    opacity: 0.2;
}
.rotatesd:hover{
    background: #cdb3e7;
    box-shadow:
        0px 0px 5px 0px #c6abe1 inset,
        0px -1px 5px 4px #c6abe1 inset,
        0px 0px 0px 7px #fff,
        1px 4px 5px 8px rgba(188, 188, 188, 0.6),
        0px 0px 0px 9px #fff;
}
.rotatesd:hover span:nth-child(3){
    opacity: 1;
}
.rotatesd:hover span:nth-child(2){
         -webkit-transform: scale(0);
    opacity: 0;
}
.rotatesd:hover span:nth-child(1){
     -webkit-animation: rotate 1s linear;
}
.rotatesd:active{
    box-shadow:
        0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset,
        0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset,
        0px 0px 0px 7px #fff,
        0px -1px 0px 8px rgba(188, 188, 188, 0.3),
        0px 0px 0px 10px #fff;
}
.rotatesd:active span:nth-child(2){
    color: rgba(170, 77, 27, 0.8);
    text-shadow: 0px 1px 1px #ad8dce;;
}
@-webkit-keyframes rotate{
    0% {  -webkit-transform: scale(1) rotate(0);}
    50% {  -webkit-transform: scale(0.5) rotate(180deg);}
    100% {  -webkit-transform: scale(1) rotate(360deg);}
}

2. gora vá ate Layout e abra um novo gadget/javascrit, dentro dele cole:

Códigos

<a href="LINK" class="rotatesd">
    <span></span>
    <span>link</span>
    <span>escreva aqui
    </span>
</a>
<a href="LINK" class="rotatesd">
    <span></span>
    <span>link</span>
    <span>escreva aqui</span>
</a>

◤Entendendo o código◥

• Nesse código só tem um link, que é o “http://static.tumblr.com/b1gnlwd/IIEmegzpj/bg.png”. Apenas faça uma imagem de tamanho 120x120 redonda e troque esse link pelo link da sua imagem.

• Na div “.rotatesd”, você pode mudar a cor do background (troca #9fcae8 pela cor que você quer), e a sombra interna (trocando #80a9c6 pela cor desejada). Já a sombra do texto e a fonte do mesmo, você muda na div “.rotatesd span”.

• Para mudar a cor do brackground do hover, modifique os códigos na div “.rotatesd:hover”. Na mesma div, troque #c6abe1 pela cor que você quer na sombra interna das bolas.

É isso queridos! Até aproxima!