Efeitos no background – Sweep to Right, Left, Bottom e Top – CSS3

Comentários

Criando efeitos no background de um elemento durante o evento “on hover” utilizando CSS 3.

Efeitos no background sweep to right, left, bottom e top

Os exemplos utilizando o pseudo elemento :before junto com as propriedades transform e transition-duration para criar efeitos interessante no background de um elemento, veja os exemplos:

Exemplos efeitos no background

Primeiro, Sweep to Right:

Passe o mouse

Sweep to Left:

Passe o mouse

Sweep to Top:

Passe o mouse

Sweep to Bottom:

Passe o mouse

 

CSS do Sweep to Right

.sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-right:hover, .sweep-to-right:focus, .sweep-to-right:active {
  color: white;
}
.sweep-to-right:hover:before, .sweep-to-right:focus:before, .sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

CSS do Sweep to Left

.sweep-to-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-left:hover, .sweep-to-left:focus, .sweep-to-left:active {
  color: white;
}
.sweep-to-left:hover:before, .sweep-to-left:focus:before, .sweep-to-left:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

CSS do Sweep to Top

.sweep-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-top:hover, .sweep-to-top:focus, .sweep-to-top:active {
  color: white;
}
.sweep-to-top:hover:before, .sweep-to-top:focus:before, .sweep-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

CSS do Sweep to Bottom

.sweep-to-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-bottom:hover, .sweep-to-bottom:focus, .sweep-to-bottom:active {
  color: white;
}
.sweep-to-bottom:hover:before, .sweep-to-bottom:focus:before, .sweep-to-bottom:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

CSS reduzido

Código CSS reduzido dos 4 efeitos para você incluir em seu projeto

.sweep-to-bottom,.sweep-to-left,.sweep-to-right,.sweep-to-top{display:inline-block;vertical-align:middle;box-shadow:0 0 1px transparent}.sweep-to-right{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-right:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.sweep-to-bottom:before,.sweep-to-left:before{-webkit-transition-timing-function:ease-out;content:"";z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1}.sweep-to-right:active,.sweep-to-right:focus,.sweep-to-right:hover{color:#fff}.sweep-to-right:active:before,.sweep-to-right:focus:before,.sweep-to-right:hover:before{-webkit-transform:scaleX(1);transform:scaleX(1)}.sweep-to-left{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-left:before{position:absolute;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}.sweep-to-left:active,.sweep-to-left:focus,.sweep-to-left:hover{color:#fff}.sweep-to-left:active:before,.sweep-to-left:focus:before,.sweep-to-left:hover:before{-webkit-transform:scaleX(1);transform:scaleX(1)}.sweep-to-bottom{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-bottom:before{position:absolute;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;transition-timing-function:ease-out}.sweep-to-bottom:active,.sweep-to-bottom:focus,.sweep-to-bottom:hover{color:#fff}.sweep-to-bottom:active:before,.sweep-to-bottom:focus:before,.sweep-to-bottom:hover:before{-webkit-transform:scaleY(1);transform:scaleY(1)}.sweep-to-top{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}.sweep-to-top:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.sweep-to-top:active,.sweep-to-top:focus,.sweep-to-top:hover{color:#fff}.sweep-to-top:active:before,.sweep-to-top:focus:before,.sweep-to-top:hover:before{-webkit-transform:scaleY(1);transform:scaleY(1)}

 

Tags: css3,efeitos de css,Efeitos no background

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *