.efeitopisca1{
padding:2px;
border:1px solid #dcdbdb;
}
.efeitopisca1:hover{
-webkit-animation-name: pisca;
-moz-animation-name: pisca;
-o-animation-name: pisca;
animation-name: pisca;
-webkit-animation-duration: 1s;
}
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPP32trQnCoWY5YG1yuzZLKY6DoN_h5e5I-aVSqujQV92cSloY7STxCQa2TWGJIq3wUUgj-goHw_09aCICj4aIs1YWFGedFQgTSd7HR4X2A_tzBtnAE1wlp9vDzMQTL1N2I64cPEtrBk0/s1600/Sem+T%C3%ADtulo-6.png" class="efeitopisca1" /></a>
Circle
.equipe {
-webkit-transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
-moz-transition: all 1.0s linear;transition: all 1.0s linear;
/* Efeito fade */-webkit-box-shadow: 0 0 .3em #000000;
/* Sombra */filter:alpha(opacity=65);
/* Opacidade */-moz-opacity:0.65;opacity:0.65;cursor: crosshair;
}
.equipe:hover {
-webkit-box-shadow: 0 0 .3em #000000;
/* Sombra */-webkit-transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
-moz-transition: all 1.0s linear;transition: all 1.0s linear;
/* Efeito fade */-webkit-border-radius: 72px;
/* Bordas arredondadas */-moz-border-radius: 72px;border-radius: 72px;filter:alpha(opacity=100); /* Opacidade */-moz-opacity:1.0;
opacity:1.0;cursor: crosshair;
}
<img border="0" class="equipe" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPP32trQnCoWY5YG1yuzZLKY6DoN_h5e5I-aVSqujQV92cSloY7STxCQa2TWGJIq3wUUgj-goHw_09aCICj4aIs1YWFGedFQgTSd7HR4X2A_tzBtnAE1wlp9vDzMQTL1N2I64cPEtrBk0/s1600/Sem+T%C3%ADtulo-6.png" />
Zoom
.elitescale{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-transition: 0s linear;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
background-color: #e7a5de;
padding: 3px;
}
.elitescale:hover {
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
background-color: #c4a6cb;
padding: 3px;
}
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPP32trQnCoWY5YG1yuzZLKY6DoN_h5e5I-aVSqujQV92cSloY7STxCQa2TWGJIq3wUUgj-goHw_09aCICj4aIs1YWFGedFQgTSd7HR4X2A_tzBtnAE1wlp9vDzMQTL1N2I64cPEtrBk0/s1600/Sem+T%C3%ADtulo-6.png" class="elitescale"/></a>
Shake
@-webkit-keyframes shake { 0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);} 25% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);} 50% {transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg);} 75% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);} 100% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);} } .shake {-webkit-transition: .9s; border-radius: 5px;} .shake:hover {-webkit-animation: shake .9s alternate ease;}
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPP32trQnCoWY5YG1yuzZLKY6DoN_h5e5I-aVSqujQV92cSloY7STxCQa2TWGJIq3wUUgj-goHw_09aCICj4aIs1YWFGedFQgTSd7HR4X2A_tzBtnAE1wlp9vDzMQTL1N2I64cPEtrBk0/s1600/Sem+T%C3%ADtulo-6.png" class="shake" />
Gild
@-webkit-keyframes gild {
50% {transform: rotate(10deg) scale(0.636);
-webkit-transform: rotate(10deg) scale(0.636);
-moz-transform: rotate(10deg) scale(0.636);
-o-transform: rotate(10deg) scale(0.636);
-ms-transform: rotate(10deg) scale(0.636)}
50% {transform: rotate(-10deg) scale(0.636);
-webkit-transform: rotate(10deg) scale(0.636);
-moz-transform: rotate(-10deg) scale(0.636);
-o-transform: rotate(-10deg) scale(0.636);
-ms-transform: rotate(-10deg) scale(0.636);}
99% { opacity: 0.0;}
100% {-webkit-transform: rotate(0deg); opacity: 1;}
}
.gild: {display: inline-block; border-radius: 5px; position: absolute; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; }
.gild:hover {-webkit-animation: gild .5s alternate linear;
-webkit-transition:5s;}
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPP32trQnCoWY5YG1yuzZLKY6DoN_h5e5I-aVSqujQV92cSloY7STxCQa2TWGJIq3wUUgj-goHw_09aCICj4aIs1YWFGedFQgTSd7HR4X2A_tzBtnAE1wlp9vDzMQTL1N2I64cPEtrBk0/s1600/Sem+T%C3%ADtulo-6.png" class="gild" /></a>
touch op
.parc1{
background: #fff;
padding:3px;
border: 1px solid #ccc; /** borda da imagem **/
width: 50px; /** largura da imagem **/
height: 50px; /** altura da imagem **/
overflow: hidden;
float: left;
margin: 4px;
-moz-transition:0.5s;
-o-transition:0.5s;
-ms-transition:0.5s;
-webkit-transition:0.5s; opacity:0.8;
}
.parc1:hover{
background: #fff;
padding:3px;
border: 1px solid #ccc; /** borda da imagem **/
width: 50px; /** largura da imagem **/
height: 50px; /** altura da imagem **/
overflow: hidden;
float: left;
margin: 4px;
opacity:1; -webkit-transform: rotate(10deg) scale(0.85);
-moz-transform: rotate(10deg) scale(0.85);
-o-transform: rotate(10deg) scale(0.85);
-ms-transform: rotate(10deg) scale(0.85);
}
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPP32trQnCoWY5YG1yuzZLKY6DoN_h5e5I-aVSqujQV92cSloY7STxCQa2TWGJIq3wUUgj-goHw_09aCICj4aIs1YWFGedFQgTSd7HR4X2A_tzBtnAE1wlp9vDzMQTL1N2I64cPEtrBk0/s1600/Sem+T%C3%ADtulo-6.png" class="parc1" />
Nenhum comentário:
Postar um comentário