3 de ago de 2016

Efeitos





Pisca
.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="http://3.bp.blogspot.com/-oM1t8DVFqvA/UqX-6ijNYBI/AAAAAAAASfw/sNu7Q6flIyY/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="http://3.bp.blogspot.com/-oM1t8DVFqvA/UqX-6ijNYBI/AAAAAAAASfw/sNu7Q6flIyY/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="http://3.bp.blogspot.com/-oM1t8DVFqvA/UqX-6ijNYBI/AAAAAAAASfw/sNu7Q6flIyY/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="http://3.bp.blogspot.com/-oM1t8DVFqvA/UqX-6ijNYBI/AAAAAAAASfw/sNu7Q6flIyY/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="http://3.bp.blogspot.com/-oM1t8DVFqvA/UqX-6ijNYBI/AAAAAAAASfw/sNu7Q6flIyY/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="http://3.bp.blogspot.com/-oM1t8DVFqvA/UqX-6ijNYBI/AAAAAAAASfw/sNu7Q6flIyY/s1600/Sem+T%C3%ADtulo-6.png" class="parc1" />

Nenhum comentário:

Postar um comentário